0

Should I compromise the 960px grid to make a section completely fluid/full-width?

The person I am making the site for really wants the image in the speaking section cropped (shortened) and therefore it will be shorter than the other 2 columns unless all 3 columns are made wider. I just have them defined as the 1/3 column skeleton width.

In the speaking section is there an easy way to make the: increase the width of the three columns and thus make the whole section/row wider (than 960 px)/span across the whole screen while still being defined by the skeleton grid.

(by easy I mean minimum manipulation to the skeleton CSS.)

url: http://tinyurl.com/qbrjqne

<section>
    <h3 id='speaking'></h3>
    <div class="container">             
        <div class='one-third column'></div>
        <div class='one-third column'></div>
        <div class="one-third column">
            <section class='whitemission'>
            </section>
        </div>
    </div>
</section>

--- base/main style --- 

@media only screen and (max-width: 767px) and (min-width: 480px)
.container .one-third.column, .container .eight.columns, .container .four.columns {margin: 50px 0; padding: 45px 0;}

-- skeleton--
.container  { position: relative; width: 960px; margin: 0 auto; padding: 0; }
.container .column,
.container .columns { float: left; display: inline; margin-left: 10px; margin-right: 10px; }
.container .one-third.column  { width: 300px; }
Pete
  • 57,112
  • 28
  • 117
  • 166
digitally
  • 18
  • 4

1 Answers1

0

One easy way would be to set the first column to "six columns" and the second and third to "five columns". Then the image would be slightly wider than the text-colums. Maybe that would fit a little better with the cropped image.

But then the image wouldn't fit as well in the 768-to-960-sized grid like it does in the 960-and-up-sized grid.

To get that fixed you could show a differently cropped image. If that would be ok. I know that it would be kind of dirty, but it's rather easy. ;)

user3734681
  • 41
  • 5