Tagged: ,

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
  • #21815

    I’ve come across a mystery I hope you can help me with. I want to increase the width of my content area. Using Firebug I see that the width is controlled by this css style in the grid.css file:

    .container .six.units {
    width: 510px;

    When I increase the width and put it in my custom css file, the content area loses its ability to be responsive. It overflows into the sidebar as the viewport gets smaller. At first, I thought it was because the width was stated in px so I changed it to ems but it still didn’t work.

    The funny thing is that when I change the width within Firebug it works perfectly.

    Here’s a URL: http://www.outtacontext.com/wp2/

    And here’s an update: by adding max-width: 100%; to the style it almost fixes the problem (there is a problem with only one viewport size as you resize it down. Take a look. (Right now I’ve got the width set at 590px.)


    Hi outtacontext,

    You should really never change the css on the grid because that grid is used across the whole site for all of the various layouts. So if you change six.units, it means anything that uses six.units will now have a different width. This carries over into the media queries which is what controls the way the theme responds to various screen sizes.

    So what you need to do is some new code to tell the browser to resize the six.units to something smaller on the size you are having issues with.

    So something like:

    @media only screen and (max-width: 989px) and (min-width: 768px) {
    .container .six.units {width: 342px;}




    Thanks. And, yes, I understand what you’re saying.

    That being said, having a width of 510 px for the content area is fairly narrow, given that the usable area is approx 600px wide. I was trying to figure out what the multiples of the grid would be so that I could resize to the next widest grid point. As a suggestion, I think you should widen the content area in this theme. One of the issues I wanted to address was that the right edge of the logo area was different than the right edge of the content area (and most importantly, any full width image that displayed). Given how wonderfully designed this theme is, that discrepancy was very visible, odd, and disconcerting.


    The layout is a stylistic choice and its actually becoming more of a growing trend to have thinner content width since it translates so well to mobile use. So I don’t think Kriesi will ever be changing the content area width as its pretty hard coded into the whole theme styling.




    Too many problems. I’ve reverted to Kriesi’s original settings. Thx.

Viewing 5 posts - 1 through 5 (of 5 total)

The topic ‘Inconsistent behavior when I change CSS and put in custom.css file’ is closed to new replies.