change page width – twentyten child theme

  • Resolved alanfinn

    (@alanfinn)


    13 years, 11 months ago

    I want to reduce the page width to 730 px, so that I can display the whole blog within an iframe on an existing html webpage.

    I have reduced the #wrapper div to 730px and eveything looks fine.
    The problem I have is that the #container div has a right-margin of -240px which sticks out from the right side of the content area, which gives me horizontal scrollbars when viewed in the iframe.

    I can’t understand why the #container has a right margin, and when I try simply setting the margin to 0px, the right hand column disappears!

    Can anyone help? The blog is here: https://www.pyrosure.com/blog/

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

  • Negative margins when applied to floated element cause the following element to overlap it, this is then compensated for by setting a positive margin of the same size on a container within the first element.

    It is often used to enable the ‘important’ stuff to come first in the html markup with advantages for SEO and screen reader software whether floated left or right.

    I wasn’t aware that this causes problems in iframes (mainly ‘cos I never use them lol)

    there some other elements with a width of 940px in style.css of the parent theme, for which you may need to add the changes tyle to your child theme:

    /* The main theme structure */
#access .menu-header,
div.menu,
#colophon,
#branding,
#main {
	width: 730px;
}
    Thread Starter alanfinn

    (@alanfinn)

    That’s fixed it!
    Thanks very much for the code, and the explanation.
    Alan

Viewing 3 replies - 1 through 3 (of 3 total)
  • The topic ‘change page width – twentyten child theme’ is closed to new replies.