Layout breaks when css is optimized

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

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

You are welcome.