- This topic is empty.
Viewing 4 posts - 1 through 4 (of 4 total)
Viewing 4 posts - 1 through 4 (of 4 total)
- The forum ‘CSS’ is closed to new topics and replies.
The forums ran from 2008-2020 and are now closed and viewable here as an archive.
Hi all,
I’m having an issue with setting a display format across multiple browsers.
I’m trying to use a media query to stop certain elements from appearing for mobile screens so I’ve put them all under one class name and set that class to display: none; whenever the screen is less than 999px.
This seems to have no issue working on Safari, Firefox and Opera however on Chrome using my desktop it seems to still display.
I thought this would be a cache issue so I tried using Chrome on my phone and it did the same thing so now I’m just plain confused.
Does anybody know of any reason why this might be happening? I’m not able to find anything online that gives me a real answer.
Thanks all.
Add Comment
We’d need a minimal demo of your code (ideally in Codepen.io ) that replicates this issue to advice in any detail.
https://codepen.io/thomas220191/pen/ReBmZb
Hey, this is an excerpt of the code here with all the main bits in. Basically everything under .catalogEntryRecommendationWidget seems to still be displaying despite the fact that the mobilehide is dissappearing. This is happening at the following web page:
So those carousels with the items on are meant to disappear as they’re marked under the class .catalogEntryRecommendationWidget and in all other browsers, they do just that but for some reason Chrome doesn’t want to work with it.
The CodePen demo doesn’t seem to illustrate the problem – it looks like it behaves the same in Firefox and Chrome.