WordPress.org

Support

Support » Themes and Templates » [Resolved] Page Alignment

[Resolved] Page Alignment

  • I have just created a wordpress blog for a charity cycle event and have installed the Nano Blogger theme. http://www.normandy2013.co.uk Looking good so far 🙂

    One small issue I have noticed is that the page does not center align on a screen with 1024 page width, requiring a visitor to scroll right to see the right hand edge of the page. As the template width is 980 I would have expected all of the page to be visible.

    Any ideas???

Viewing 5 replies - 1 through 5 (of 5 total)
  • The element #wrapper has the following CSS that contribute to the width:

    border: 1px solid #EDEDED;
    padding: 10px;
    width: 980px;

    980 + 10 + 10 + 1 + 1 = 1002px

    From a screen width of 1024px you lose about 28px (varies depending on browser) in vertical scroll bar and browser chrome leaving you about 996px – unfortunately the wrapper is simply too wide for the browser viewport.

    You could just remove padding: 10px; but it looks pretty bad. The simplest solution might be to add a media query targeting screens at or below 1024px and removing the padding only from them (though if your dealing with old laptops they may have old browsers that dont support media queries….)

    try adding this

    <style type="text/css">
    @media screen and (max-width:1024px) {
      #wrapper {
        padding: 0px;
      }
    }
    </style>

    Thanks for your quick reply !

    The suggested code did not work, but it did point me in the right direction.

    This seems to deliver a solution, I just need to see how it looks on bigger screens

    <style type="text/css">
    @media screen and (max-width:1024px) {
      #wrapper {
        position: relative;
        left: -148px;
      }
    }
    </style>
    Theme Author Mayeenul Islam

    @wzislam

    As it’s a free theme in WordPress depository, updates are not quick.

    zeniph pointed correctly, though the wrapper is center aligned, the padding and shadow things made it a bit wider. This was just the starting point, in the next revision, we will go for a responsive one, inshALLAH.

    Thanks for your feedback. We will consider it in the next revision.

    Theme Author Mayeenul Islam

    @wzislam

    <style type="text/css">
    @media screen and (max-width:1024px) {
      #wrapper {
        position: relative;
        left: -148px;
      }
    }
    </style>

    I tested the code in 1366 x 768.
    It’s working fine. Hope it’d be fine in wider screens too.

    Beside that, a good solution can be:
    Remove the margin from body

    body {
    	//margin: 1.5em 15%;
    	font-family: 'Cambria', Arial, Helvetica, sans-serif;
    	font-size: 100%;
    	}

    and edit margin like this, on #wrapper

    #wrapper{
    	margin: 1.5em auto;
            }

    Theme Author Mayeenul Islam

    @wzislam

    In the new version (2.1) of the theme, the problem is fixed, alHamduLILLAH.

    Happy blogging with nano blogger. 🙂

Viewing 5 replies - 1 through 5 (of 5 total)
  • The topic ‘[Resolved] Page Alignment’ is closed to new replies.