WordPress.org

Ready to get started?Download WordPress

Forums

Twenty Twelve
Twenty Twelve Theme: Width in IE8 (9 posts)

  1. windstyles
    Member
    Posted 1 year ago #

    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!

  2. zeaks
    Member
    Posted 1 year ago #

    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.

  3. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

    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.

  4. windstyles
    Member
    Posted 1 year ago #

    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]>
    <style>
    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);
    </style>
    <![endif]-->

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

  5. zeaks
    Member
    Posted 1 year ago #

    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/

  6. windstyles
    Member
    Posted 1 year ago #

    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!!

  7. WPyogi
    Volunteer Moderator
    Posted 1 year ago #

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

  8. zeaks
    Member
    Posted 1 year ago #

    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.

  9. windstyles
    Member
    Posted 1 year ago #

    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 :)

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic