Support » Themes and Templates » Twenty Twelve Theme: Width in IE8

Twenty Twelve Theme: Width in IE8

  • Hello! I have made some changes to the css to modify the width of the content area. Works perfect in Firefox and Chrome, but not in IE8.

    Anyone know what/how I can make IE8 recognize the changes?
    Do I need to create separate info in my style.css file for IE8 only?
    If so, how do I do this?

    Thank you!

Viewing 8 replies - 1 through 8 (of 8 total)
  • You can use the IE conditional .ie to target IE 7 and IE8

    Your CSS is probably within @media queries, ie 7 and 8 doesn’t understand them.



    Forum Moderator

    But do NOT modify the theme files (even CSS) directly – you must use a Child Theme or custom CSS (such as jetpack plugin).

    Otherwise all your changes will be lost when WP is updated, and you must also have a clean copy for troubleshooting purposes.

    Thanks Zeaks, you are correct, it is within @media queries.
    Probably a dumb question, but am I supposed to add the conditional like this?

    <!--[if gte IE 8]>
    body .site {
    		padding: 0 40px;
    		padding: 0 2.857142857rem;
    		margin-top: 18px;
    		margin-top: 1.428571429rem;
    		margin-bottom: 48px;
    		margin-bottom: 3.428571429rem;
    		box-shadow: 0 2px 6px rgba(100, 100, 100, 0.3);

    I tried that and it isn’t working still… so not sure what else to try.
    Thank you!

    In your CSS just add .ie before the normal class.
    For example say I wanted to increase the site width, my normal css might look like

    @media screen and (min-width: 960px) {
        .site {
            max-width: 1000px;

    then for IE 7 and 8 I would use

    .ie .site { max-width: 1000px; }

    In your case .ie body .site { etc etc

    .ie is a built in class for Twenty Twelve theme. I wrote a post that explains this in more detail near the bottom http://zeaks.org/tutorials/twenty-twelve-theme-three-column-layout/

    zeaks, I truly appreciate all of your help. I wish I could say that worked, but it didn’t 🙁 At first, it actually “broke” my Firefox, but I got that working again. But, nothing I do fixes the ie problem.

    This is the code I added to jetpack CSS:

    .ie .site {
        	margin: 0 auto;
    		max-width: 560px;
    		max-width: 48.571428571rem;
    		overflow: hidden;
    .ie	.site-content {
    		float: left;
    		width: 65.104166667%;

    Any other ideas?

    Thank you!!



    Forum Moderator

    The comment tags ( /* */ ) render that CSS inactive.

    Yeah, your CSS is commented out. Before saying something doesn’t work, make sure you’ve done it correctly. Nothing I posted would “break” your Firefox.

    I never intended it to mean that you told me to do something that “broke” it, I am sorry if it came off sounding like that!!! Obviously, I screwed it up and therefore it quit working once I started editing jetPack.

    Thank you all for your help 🙂

Viewing 8 replies - 1 through 8 (of 8 total)
  • The topic ‘Twenty Twelve Theme: Width in IE8’ is closed to new replies.