'display: none' not working on mobile
-
Hi there. I have an jQuery accordion where I am hiding the content at first with 'display: none;' on the class in my css.. It works fine in the desktop layout but does not work in mobile. In fact, even if i just make a simple text block, give the row a class, and then set that class to 'display: none;' it does not hide it in mobile.
So simply put - display: none; does not work at all on mobile. I just checked and it is not working either on another site I built on mobile either. Perhaps something has gone wrong in a new iteration of lay theme? From the inspector it seems my css that sets a class to display: none is being overruled by a lay theme style sheet.
Could you have a look please as this is a bit of a problem.
anniebellamy.com/scholarship
hannahcollins.net/textsThankyou!
Duncan -
This post is deleted!
-
Dear @DMB
From first look it seems your CSS:
@media (max-width: 600px) .textrow1, .textrow2, .textrow3, .textrow4, .textrow5, .textrow6, .textrow7, .textrow8, .textrow9, .textrow10, .textrow11, .textrow12, .textrow13, .textrow14, .textrow15, .textrow16, .textrow17, .textrow18, .textrow19, .textrow20, .textrow21, .textrow22, .textrow23, .textrow24, .textrow25 { display: none; }
'Display:none' is getting overridden by it's parent row's:
@media (max-width: 600px) .lay-content .row { -webkit-box-sizing: border-box; box-sizing: border-box; display: block; }
When removing/unchecking this 'display:block' your Accordions function for me.
Hope this helps & best wishes :)
Richard
-
Hi Richard,
This is true, this does work if I uncheck 'display:block' on the parent rows like you suggested in firefox dev tools. However, what code would i use? If I use display: none on the parent in my css then nothing shows up at all.
Block, inline, flex etc none of those will work. Is there no way I can get my class to override the parent rows at all?
Best,
Duncan -
Dear Duncan @DMB
To really 'remove' it you can use a simple line of jQuery where you target and then replace with ' ' ( nothing )
https://stackoverflow.com/questions/9405689/how-to-remove-css-property-in-jquery/9405718
Hope this helps you in the right direction :)
Best Wishes
Richard
Before you post:
- When using a WordPress Cache plugin, disable it or clear your cache.
- Update Lay Theme and all Lay Theme Addons
- Disable all Plugins
- Go to Lay Options → Custom CSS & HTML, click "Turn Off All Custom Code", click "Save Changes"
This often solves issues you might run into
When you post:
- Post a link to where the problem is
- Does the problem happen on Chrome, Firefox, Safari or iPhone or Android?
- If the problem is difficult to explain, post screenshots / link to a video to explain it