Docs

[Aitchess]

Hi

Mycorfu.eu is a one page site. I would like the site to display full width on mobiles but boxed on larger screens. Please can you advise how I can do that? I am using a child theme (in case that matters).

Thank you for your help.
Regards
Helen

[Thai]

Hi Helen,

Please add the following CSS under Customizer > Custom > Global CSS:

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

Hope it helps 🙂

[Aitchess]

Hi

The above code didn’t seem to do anything. The ‘site layout’setting was set to’fullwidth’ and I added the above code but nothing happened.

I have I have now changed my settings so that the default is now ‘boxed’

Site Layout: Boxed
Site Max Width (px) 1024
Site Width (%) 90
Content Layout Fullwidth

Please advise the code that I should now use so that the site layout is fullwidth for smaller screens.

Thank you for your help
Helen

[Nabeel A]

Hi again,

Please replace the previous code with this one:

@media screen and (max-width: 979px){
.site, .x-navbar.x-navbar-fixed-top.x-container.max.width {
    width: 100% !important;
}
}

Let us know how this goes!

[Aitchess]

Marvellous. Thank you.
Helen

[Joao]

Great to hear it.

Let us know if you need help with anything else.

Joao

[Author]

Posts