• Hi all!
    I love this template but I have a problem with it:
    I’d like to center the page, I read your forum, I found a solution:

    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;
    }

    But the mobile version is wrong: the page is too wide and the letters are too small.
    How can I set the page to be centered and mobile version look like original?

    Thanks your support!

    Regards,
    Norbert

Viewing 3 replies - 1 through 3 (of 3 total)
  • 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!

    Thread Starter norbertba

    (@norbertba)

    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. ??

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘Centered mobile view’ is closed to new replies.