Desktop & Tablet styles overrule All Devices styles on largest screen size

Author Posts

everlearn November 15, 2018 at 6:04 pm

Heads up! this post was created when Microthemer was at version 5. The current version is 7. Some references to the interface may be out of date.

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.

Can you advise what to do Sebastian?

Thanks in advance for your help.

Kind regards,
Rob

Sebastian November 16, 2018 at 8:36 am

Hey Rob,

Wow, version 1! Not many people can say that 🙂

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?

Thanks,
Sebastian

everlearn November 16, 2018 at 11:28 am

Hi Sebastian,

I have sent you an e-mail with all the details.

Thanks for looking into it.

Regards,
Rob

Sebastian November 16, 2018 at 11:53 am

Thanks Rob,

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.

Does the above tip solve your issue?

Cheers,
Sebastian

everlearn November 16, 2018 at 12:19 pm

Hi Sebastian,

Thanks for looking into this.

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.

Regards,
Rob

Sebastian November 16, 2018 at 12:43 pm

You’re welcome Rob!

You must login or register to reply to this topic.