WordPress.org

Ready to get started?Download WordPress

Forums

nano blogger
[resolved] Page Alignment (6 posts)

  1. JonBuoy
    Member
    Posted 1 year ago #

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

  2. zeniph
    Member
    Posted 1 year ago #

    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>
  3. JonBuoy
    Member
    Posted 1 year ago #

    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>
  4. Mayeenul Islam
    Member
    Theme Author

    Posted 1 year ago #

    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.

  5. Mayeenul Islam
    Member
    Theme Author

    Posted 1 year ago #

    <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;
            }
  6. Mayeenul Islam
    Member
    Theme Author

    Posted 1 year ago #

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

    Happy blogging with nano blogger. :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic

Tags

No tags yet.