#1026 – Layout breaks when css is optimized

Status: Closed - Category: Route 66
Hi there,
I am loading style sheets according to screen size - so, desktop, mobile-portrait, mobile-landscape, tablet-portrait, and so on.
As soon as I enable CSS optimize, my layout breaks across all devices. Would that be because ALL of them are thrown together and there are duplicates?

Any insight is appreciated!
Gina G.
Hi Gina,

Can you please provide more details? How do you detect the screen size and load different stylesheets? Are you using Javascript?
A link to your page would be very helpful.

Regards
 
Sure thing. No javascript.

<link rel="stylesheet" type="text/css" href="/templates/2022/css/common.css">
<link rel="stylesheet" media="screen and (min-width: 200px) and (max-width: 649px) and (orientation:portrait)" href="/templates/2022/css/mobile-portrait.css" />
<link rel="stylesheet" media="screen and (min-width: 200px) and (max-width: 901px) and (orientation:landscape)" href="/templates/2022/css/mobile-landscape.css" />
<link rel="stylesheet" media="screen and (min-width: 599px) and (max-width: 1199px) and (orientation:portrait)" href="/templates/2022/css/tablet-portrait.css" />
<link rel="stylesheet" media="screen and (min-width: 801px) and (max-width: 1200px) and (orientation:landscape)" href="/templates/2022/css/tablet-landscape.css" />
<link rel="stylesheet" media="screen and (min-width: 1201px) and (orientation:landscape)" href="/templates/2022/css/desktop.css" />

Live site https://www.hawkeye.ca

Thanks.
Hi Gina,

Using media queries in media attribute of the link tag does not affect the loading of CSS files. It just tells the browser which file should use, not load . The browser needs to load all those files in order to do this. That's why this approach has no benefits when considering the site loading time.

You can verify what I am saying by using the network inspector of your browser. You will see that all the CSS files are loaded in every request, for every screen size.

Now back to your question, Route 66 does not support this at the moment. Route 66 combines all CSS files in one and places the result in the page source, as you noticed correctly. This is a recommendation from Google Core Web Vitals / PageSpeed in order to improve page rendering time. More information can be found at https://web.dev/css-web-vitals/.

So since Route 66 combines all files, and your media queries are in the link media attribute instead of the source code we end up with a broken layout.

I recommend to just disable CSS optimization in Route 66 options. For any new site, you might want to consider using media queries inside your CSS source code.

Please let me know if you have any questions.

Regards

 
Ok, thank you.
You are welcome.
 
This ticket is closed, therefore read-only. You can no longer reply to it. If you need to provide more information, please open a new ticket and mention this ticket's number.

Note: An active subscription is required in order to get support for our paid extensions. For our free extensions, if you don't have an account, register and then submit your support request.  In case you just want to ask a question, you can also use the contact form .

Note: Our support team is currently on vacation, so please anticipate slightly longer response times. Thank you for your understanding!

Firecoders
Are you using our extensions? Please post a review at the Joomla extensions directory!
Post a review