• Resolved rook

    (@rookandamosymailcom)


    Hello all I am having a strange problem with my site, I am trying to set it at full width across the screen for a normal laptop monitor. I have done this by setting #page to 2000px. But for some reason there is a gap down the left side of the page, and I cant for the life of me work out why.

    here is a link to the page: http://osbornerestoration.co.uk/about/

    thanks for any help in advance.

    Cheers

    Harry

Viewing 12 replies - 1 through 12 (of 12 total)
  • http://osbornerestoration.co.uk/wp-content/themes/twentyeleven/style.css

    #main #content {
    		margin: 0 7.6%;
    		width: auto;
    	}

    Try tweaking those values?

    No! Do not edit the Twenty Eleven theme. First create a child theme for your changes. Or install a custom CSS plugin.

    Thread Starter rook

    (@rookandamosymailcom)

    sorry the gap is down the right side. Dont know if that makes a difference Rajesh, I will continue to tweek these values in main and content, so far to no avail.

    cheers

    Thread Starter rook

    (@rookandamosymailcom)

    yeas it is a child theme esmi

    Thread Starter rook

    (@rookandamosymailcom)

    Hi Rajesh so far these changes dont seem to effect things, the margin values center the content, but the width value seems to effect nothing. Its like the site naturally makes itself slightly wider than the screen.

    Have you tried using Firefox with the Firebug add-on for this kind of CSS troubleshooting? Or whatever developer tool is available in your web browser? These tools can really reduce the amount of time spent trying to pin down a particularly elusive piece of CSS.

    Thread Starter rook

    (@rookandamosymailcom)

    yeah I have been using chrome with inspect element, but cant seem to make that gap on the right go away. It’s like there is extra space after the width of page, content, main, nav, etc..strange.

    I have customised the header width and height, in the php.

    I can’t see a gap but then this monitor only goes to 1600px wide. I did notice that you have a couple of markup and CSS errors (check the entry for your child’s stylesheet) that could cause issues in some browsers.

    Thread Starter rook

    (@rookandamosymailcom)

    ok thanks i’ll look into all that, looks like I was sloppier than I thought. Cheers

    I think I found the problem. You don’t need the max-width: 2000px; on line 264 of your style sheet. Remove that and you should be fine.

    UPDATE:
    Actually, removing that line messes up the sizing in lower resolutions.

    Okay, I _have_ found it now:

    Find ‘div class=”skip-link”‘ in Chrome’s Inspect Element.
    Look at the ‘a class=”assistive-text”‘ in that Div. It has extra padding that’s messing you up.

    If you uncheck the padding you’ll see the problem still isn’t fixed, BUT if you scroll down a bit further in the Matched CSS Rules, you’ll see that now another Padding has become Checked. Uncheck this again and it fixes your issue.

    You just need to do some tweaking because you actually need some of that padding for your menu.

    Thread Starter rook

    (@rookandamosymailcom)

    Nice one dabhandconz, that worked out nicely. very much appreciated.

Viewing 12 replies - 1 through 12 (of 12 total)
  • The topic ‘Twenty eleven theme appearing wider than set’ is closed to new replies.