'display: none' not working on mobile

[DMB]

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/texts

Thankyou!
Duncan

[DMB]

Sorry i forgot to say this is happening in chrome, firefox and safari.

[Richard]

This post is deleted!

[Richard]

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

[DMB]

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

[Richard]

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