Centered mobile view

Hi Norbert,

Could you try wrapping a media query around your custom CSS? The following media query would make sure that the CSS is only applied to devices that are 767px in width or wider:

@media only screen and (min-width: 767px) {
    body {
        position: relative;
        width: 940px;
        margin: 0 auto;
        padding-top: 0;
    }

    body:after,
    body:before {
        position: absolute;
        height: 100%;
    }

    #page:before {
        position: absolute;
    }
    
    #page {
        padding-top: 40px;
    }
}

Let me know if that works out for you! If not, please share a link to your site so that I can dig into your specific CSS.

Thanks!

Hi Siobhan,

I replaced the original with yours, but it looks the same on mobile. Probably doing something wrong or I’m trying to wrong place.

Our blog: https://www.oromvirag.hu/blog

Thanks your help!

Norbert

Hi Norbert,

Apologies, I’m not sure if I understood your end goal correctly.

I originally thought you wanted the layout of your site to look the same on mobile as the theme’s demo site looks.

Do you instead wish for the site to appear centred and to show some of the background image when viewed on mobile, as it does on desktop with your custom CSS? If so, something like the following would do the trick:

@media only screen and (max-width: 767px) {
    body {
        background: url('https://www.oromvirag.hu/blog/wp-content/uploads/2016/10/mandala_szerkesztett6.png') !important;
        background-color: #ffe357 !important;
    }

    .sidebar-closed #page {
        width: 90%;
        margin: auto;
        overflow: hidden;
    }
}

Give that a go. ??