WordPress.org

Ready to get started?Download WordPress

Forums

[resolved] How to make theme to fit wide screens too? (3 posts)

  1. dinna
    Member
    Posted 5 years ago #

    Hi,

    My theme fits quite nicely (from side to side) on regular monitors but on laptops (wide-screens) it is aligned to the left. :-(
    How can I make the theme to run from side to side on wide screens too (staying still neat on regular screens!)

    ...or position it to the centre so the blank gap is not that annoying?

    Can anyone help? Please!

    Here is the css, if that helps:
    (Btw my website is: http://www.trendymums.co.uk)

    body {
    background-image: url('images/background.png');
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-color: #ffffff;
    font-family: veranda;
    font-size: 12pt;
    color: #000000;
    }

    a
    {color:#000000; text-decoration: none;}

    a:hover
    {cursor:crosshair;color:#000000; text-transform: uppercase; text-decoration: none; border-bottom: 3px double black}

    blockquote, input, textarea
    {
    line-height:10px;
    color: #00827F;
    background:#FFF3A7;
    border:#F3C907 1px solid;
    padding:3px
    }

    #content ol, #content ul { color: #00827F; }

    h1 a {
    color:#5E2200;
    font:36px 'century gothic', sans-serif}

    #container h2 {
    font-family: veranda;
    background-color: none;
    text-transform: uppercase;
    font-weight: bold;
    font-size: 14px;
    line-height: 12px;
    border-bottom: 2px dashed #F3C907;
    color: #5E2200;
    text-align: right
    }

    h2#description {color:#F3C907;
    font-size:18px;
    text-align:right;
    font-weight:normal}

    h3.storytitle a {color:#EE0166;
    font-weight:bold;
    font-size:16px}

    .storycontent a {color:#ee0166}

    #rap {margin-left: 344px;
    width:644px}

    #content {float:left;
    width:424px}

    #menu {float:right;
    width:200px}

    #menu ul {list-style:none;
    margin:0;
    padding:0 0 0 10px}

    a img {border:0}

    #content img {max-width:300px}

  2. zeniph
    Member
    Posted 5 years ago #

    replace the 2 existing selectors with the 2 below. The BODY one is only really if you care about IE6

    #rap {
    margin:0 auto;
    text-align:left;
    width:644px;
    }
    
    body {
    background-attachment:fixed;
    background-color:#FFFFFF;
    background-image:url(images/background.png);
    background-repeat:no-repeat;
    color:#000000;
    font-family:veranda;
    font-size:12pt;
    margin:0 auto;
    text-align:center;
    }
  3. Mark / t31os
    Moderator
    Posted 5 years ago #

    Change this part...

    #rap {margin-left: 344px;
    width:644px}

    For...

    #rap {margin:0 auto;
    width:644px}

    You main content area should stay central regardless of the screen resolution now... though the side effect of doing so will mean part of your background image text will now sit slightly behind the content area on small resolutions...

    I'd suggest just trying it... , you can always change it back... :)

Topic Closed

This topic has been closed to new replies.

About this Topic