Title: Centered mobile view
Last modified: November 2, 2016

---

# Centered mobile view

 *  [norbertba](https://wordpress.org/support/users/norbertba/)
 * (@norbertba)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/centered-mobile-view/)
 * 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](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/centered-mobile-view/#post-8387908)
 * Hi Norbert,
 * Could you try wrapping [a media query](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries)
   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](https://wordpress.org/support/users/norbertba/)
 * (@norbertba)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/centered-mobile-view/#post-8395829)
 * 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](http://www.oromvirag.hu/blog)
 * Thanks your help!
 * Norbert
 *  [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * (@siobhyb)
 * [9 years, 6 months ago](https://wordpress.org/support/topic/centered-mobile-view/#post-8406820)
 * 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](http://writrdemo.wordpress.com) 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.

 * ![](https://i0.wp.com/themes.svn.wordpress.org/writr/1.2.9/screenshot.png)
 * Writr
 * [Support Threads](https://wordpress.org/support/theme/writr/)
 * [Active Topics](https://wordpress.org/support/theme/writr/active/)
 * [Unresolved Topics](https://wordpress.org/support/theme/writr/unresolved/)
 * [Reviews](https://wordpress.org/support/theme/writr/reviews/)

 * 3 replies
 * 2 participants
 * Last reply from: [Siobhan](https://wordpress.org/support/users/siobhyb/)
 * Last activity: [9 years, 6 months ago](https://wordpress.org/support/topic/centered-mobile-view/#post-8406820)
 * Status: not resolved