Centered mobile view

  • norbertba

    (@norbertba)


    9 years, 6 months ago

    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)
  • Siobhan

    (@siobhyb)

    9 years, 6 months ago

    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)

    9 years, 6 months ago

    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: http://www.oromvirag.hu/blog

    Thanks your help!

    Norbert

    Siobhan

    (@siobhyb)

    9 years, 6 months ago

    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('http://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.