CPU: Mac
Browser: Chrome Version 70.0.3538.77 (for development)
MT version: 5.2.5.7
I have been using MT on our site since MT version 1. And it’s been really helpful. My workflow is desktop first (largest design size) as we mostly have desktop customers. So I style manually for desktop and then use MT to overrule these styles (if needed) for smaller devices. But since 2 to 3 weeks MT is giving me some issues.
Settings in the Desktop & Tablet query tab overrule the styles of my default manually written stylesheet when viewed in the largest browser view. Also changes in the Desktop & Tablet query tab determine the styles under the All Devices tab (in grey) thus overruling my default styles. Adding changes in the All Devices tab then doesn’t do anything.
So simply put the default desktop design is looking like the design for large tablets when viewed in a large desktop browser window.
Media query sizes haven’t changed in a long while.
Yeah sure I’m happy to take a look. Please could you send access details to your site via our secure contact form? And could you also give me an example of a specific style on a specific page that is rendering on large screens when it should only apply to smaller screens?
Email received! Looking at the media queries you’ve defined, it looks like the media query you set for the Desktop & Tablet tab just needs a max-width condition. Right now, it only sets a min-width condition:
@media (min-width: 960px)
So it currently applies to all screens at and above 960px. What size screen would you like this media query to target? If it was screen sizes below 1200px you could change the media query to:
@media (min-width: 960px) and (max-width: 1199px)
I noticed you customised the Tablet media query with the following code:
@media (min-width: 760px) and (max-width: 959px)
So as well as setting a max-width condition on the Desktop & Tablet media query to save future confusion, perhaps you actually want to apply the background image size (920px 460px) you mentioned in your email to the Tablet tab instead?
BTW the All Devices tab wasn’t overriding your media query tabs because that’s how MT is deliberately designed. Responsive tab code comes after the all devices code in the stylesheet. And so overrides equivalent selector styles added on the all devices tab. That’s usually what one wants to happen.
Sorry, maybe my wording for overruling wasn’t correct. Desktop & Tablets should take over as soon as the screen size is reduced into its query determined size. But when the browser size is above the Desktop & Tablets query it shouldn’t influence my default styles. And that’s what it is doing. But the missing max-width explains a lot. I missed that.
Very strange though as it definitely had one. It has worked correctly for years but only played up since a few weeks. Anyway, I’ll fix it.
Thanks again for your swift reponse and great support.
