Expand accordions

Support
#1

Hello, is it possible to expand accordions to full screen width on a phone screen with the media query? I would also like to expand other elements such as text boxes etc to try and use as much as the small screen as possible.

#2

Hi There,

Please try adding the following CSS under Customizer > Custom > Global CSS:

@media (max-width: 480px){
    .page-id-1220 .x-container.max.width.main {
        width: 100%;
    }
}
#3

Thanks, tried that but did not work. Only way I can get them to expand on small screens is to turn column container OFF but then this does not have the effect I want on a desktop screen as it is set for every screen size. So if we could just turn column container off at small screen size that would work, any other ideas?

#4

update, it partially worked, the main screen did expand, It’s just the accordions which I now need to get to expand on the smaller screens, thanks.

#5

also can I have that code target ALL pages instead of just the one?

#6

Hi There,

Please update the previous CSS to this:

@media (max-width: 480px){
    .x-section .x-container,
    .x-container.max.width.main {
        width: 100%;
    }
}