WordPress.com

1. cheathb
   Member
   Jun 22, 2011, 5:04 PM

   I'm using Inuit Types with the custom CSS upgrade http://kcemployees.wordpress.com . There is an @media (max-width: 1024px) style that adds a 15px margin on the left of the container for narrow screens. I don't need this margin as I already have a 15px margin outside of my container, and adding the margin smashes my logo and widgets to the right margin of the container. Also, IE8 and below add the margin whether the screen is narrow or not.

   I've tried removing the style, changing the margin to 0 in the style, and even changing it to -15px. The margin remains in all three cases meaning it is probably coming from the code for the theme. Is there any way I can overwrite this?

   The blog I need help with is kcemployees.wordpress.com.

2. designsimply
   Staff
   Jun 24, 2011, 4:37 PM

   I see that you have this right now:

   @media max-width 1024px {
   .content_left,.footer_left,.fl {
   margin-left:-15px!important;
   }
   }

   If you put that code in the correct syntax, it will shift the class="content_left" and class="footer_left" and class="fl" content left 15px, but I don't think that's what you want to do because it will overlap the shadow area on the left. Here's the correct syntax if you want to try it though:

   .content_left, .footer_left, .fl {
   margin-left: -15px !important;
   }

   What is your exact end goal? Is it to move the entier class="container" left 15px? You might want this then:

   .container {
   margin-left: 0px;
   }

   Or are you trying to change the gutter size between the left shadow and the full_posts?

3. designsimply
   Staff
   Jun 24, 2011, 4:43 PM

   Hang on, I checked this in Firefox and not IE8. Hmm. Looking for a way to easily test CSS changes in IE8.

4. cheathb
   Member
   Jun 24, 2011, 5:11 PM

   @designsimply

   Yes, I'm trying to get rid of the gutter between the shadow and my header image. The @media style is part of the template stylesheet so it might need to stay in some form, but your comment made me realize that, while I have "body {margin:0;}", I hadn't explicity called out a zero margin for .content_left prior to the @media style. Should have thought of that! I did it just now and it seems to work. Thanks!

   You can use F12 to get developer tools. It's pretty similar to Firebug.

5. devblog
   Member
   Jun 24, 2011, 5:22 PM

   Hang on, I checked this in Firefox and not IE8. Hmm. Looking for a way to easily test CSS changes in IE8.

   When someone's having layout problems in IE, what I usually do, is save a page to my local HD, modify the CSS and check those changes in IE and other browsers.

Topic Closed

This topic has been closed to new replies.