Bootstrap column malfunction

Perfect! Yes, I can see the wisdom in coming out of the grid every now and then to fix errant issues like these.
Thanks again Paul.

Any idea how I can break out of the grid below the content area and above the footer?
I’d like to add a fluid width strip (like the header banner) to advertise a special offer.

http://temp.osborneparkautorepairs.com.au/

Any help appreciated.

Hi,

Because your content and footer are within the same single container you can’t really break out of the 1170px max-width. What you would need to do is close the container at the point where you want the wide strip and then insert your wide strip code and then start a new container for the footer.

If all you want is a background colour that goes edge to edge (but content is centred within the 1170px) then you could use the old box shadow trick as follows.

.wide{
	background:red;
	min-height:200px;
	box-shadow:1140px 0 0 red, -1140px 0 0 red;
}

Then place the wide div before the footer (no other html was changed).

</div>
<!-- #primary --> 
  </div>
  <!-- #content -->

  <div class="wide"> This will appear wide </div>
 
 <footer id="colophon" class="site-footer" role="contentinfo">

The shadows will go edge to edge but content is still restricted to the main container.

2 Likes

Awesome Paul! thanks for taking the time. I love the pseudo solution with box shadow (which I hadn’t seen before) so the structure stays the same.
Can you show me how to lose the padding in small viewport sizes, so the blue strip goes from chrome to chrome like the header?

Any help appreciated.

Hi,

You will need to add a couple of media queries to reduce the box-shadow width as the box shadow can never be wider than the actual content otherwise it moves away from the element.

This shoud fix it for your layout.

.wide{
	background:red;
	min-height:200px;
	box-shadow:1140px 0 0 red, -1140px 0 0 red;
}
@media screen and (max-width:1200px){
	.wide{box-shadow:300px 0 0 red, -300px 0 0 red;}
}
@media screen and (max-width:480px){
	.wide{box-shadow:100px 0 0 red, -100px 0 0 red;}
}
1 Like

Thanks Paul, spot on!
Did you pick 1140px for the box-shadow width to make it safely overlap the ‘wide div’ or could it possibly have been 1170px - maybe a dumb question, but just wondering how you arrived at 1140px being 30px less that the ‘wide div’.

The div is 1140px wide because the main .container is 1170px but has 15px padding on each side leaving only 11450px od space for the div. Just click the div in the web inspector and it will tell you how wide it is.

The box-shadow offset can never be bigger than the div because then it moves away from the element leaving a gap.

So for a 500px element you can have a 500px strip either side using box-shadow. In your case the 1140px width means you can cater for windows that are 3420px wide which is basically anything of normal use.

1 Like

Much obliged! understand now :grinning:

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.