How to make theme to fit wide screens too?

  • Resolved dinna

    (@dinna)


    15 years, 5 months 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: https://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}

Viewing 2 replies - 1 through 2 (of 2 total)

  • 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;
}

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

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘How to make theme to fit wide screens too?’ is closed to new replies.