The discussion title is: Mobile page layout not using theme. alex_VIDAL is experiencing issues with their custom theme not being applied correctly on mobile devices (Safari), despite working fine on desktop. nolo suggests that the templates used for desktop and mobile are different, requiring adjustments to the declarations. alex_VIDAL discovers that the pluginOutlet is different, but still encounters issues with CSS not loading from the theme. awesomerobot explains that the templates have differences, requiring distinct CSS for desktop and mobile, and provides an example of how to remove borders on desktop and mobile using different CSS selectors.
Hello,
I have create a custom theme and it works fine on desktop, however it seems that on mobile some of the overrides (using PluginOutlet ) are not being applied on mobile (safari). for exemple on desktop my category page looks like this :
both desktop and mobile are set to :
Any idea what im doing wrong?
Thank you
Even if you set the same layout for desktop and mobile in your admin settings, the templates used are probably not the same. You’d have to inspect both templates and adjust your declarations accordingly.
Ah yes i see the pluginOutlet is different.
however it stil seems like the CSS are not loading from the theme.
The templates have some differences that may require different CSS for desktop vs mobile, so you’ll have to inspect the page and add different CSS for mobile (you can get mobile view on a desktop device by adding ?mobile_view=1 to the end of the URL)
If you’re removing the borders on desktop for example, you can do:
.category-list tbody .category {
border: none;
}
but on mobile you’d have to do:
.category-list-item {
border: none;
}
At some point I think we’ll make these templates consistent across all devices, but this is what is needed for the current state of things.