Bootstrap column malfunction

Thanks Sam,
Please see PaulOB’s reply - this nailed it.

Sorry about the col-md-3 red herring - operator error :confounded:

Paul,
I have an issue with all the elements on the page offset a little too far to the right. It seems like a lingering extra margin value somewhere as the problem persists over all the breakpoints.

Any help appreciated.
http://temp.osborneparkautorepairs.com.au/

In bootstrap containers can’t be nested and I think its your container here that causes the problem.

<div class="services container">

Try removing .container and see if that fixed it.

1 Like

Right on the money! Thanks Paul :grinning:

Paul,
Any idea how to get the blue background in the visible-xs, visible-sm, and visible-md versions of this page to extend to the chrome left and right?

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

Any help appreciated.

Hi,

You would be better coming out of the grid to do that and just put the background on a full width wrapper and then have an inner element with a max-width of 1170px (or whatever you have your max-width set to).

e.g. Move the images and place them inside two containers like this.

</header>
<!-- #masthead -->

<div class="bgwrap">
  <div class="bgwrap-inner">
    <div class="visible-xs mobile-blueBg"> <img class="img-responsive" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/kar-mobile-header.png"> </div>
    <p><!-- /visible-xs --></p>
    <div class="visible-sm"> <img class="img-responsive" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/KAR-mobile-layout-768px.png"> </div>
    <p><!-- /visible-sm --></p>
    <div class="visible-md"> <img class="img-responsive" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/KAR-mobile-layout-1024px.gif"> </div>
  </div>
</div>

<div id="content" class="site-content">
<div class="container">
  <div class="row">
    <div id="primary" class="col-md-12 col-lg-12">
      <main id="main" class="site-main" role="main">
        <article id="post-701" class="post-701 page type-page status-publish hentry">
          <header class="entry-header"> </header>
          <!-- .entry-header -->
          
          <div class="entry-content">

Then just use this CSS:

.bgwrap{background:#29378f}
.bgwrap-inner{max-width:1170px;margin:auto;}

Sometimes the grid just gets in the way for simple stuff like this.

The whole page with code in place.

<!DOCTYPE html>
<html lang="en-US">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<link rel="profile" href="http://gmpg.org/xfn/11">
<link rel="pingback" href="http://temp.osborneparkautorepairs.com.au/xmlrpc.php">
<title>Keith Adamsons Auto Repairs &#8211; Just another WordPress site</title>
<link rel="alternate" type="application/rss+xml" title="Keith Adamsons Auto Repairs &raquo; Feed" href="http://temp.osborneparkautorepairs.com.au/feed/" />
<link rel="alternate" type="application/rss+xml" title="Keith Adamsons Auto Repairs &raquo; Comments Feed" href="http://temp.osborneparkautorepairs.com.au/comments/feed/" />
<script type="text/javascript">
			window._wpemojiSettings = {"baseUrl":"http:\/\/s.w.org\/images\/core\/emoji\/72x72\/","ext":".png","source":{"concatemoji":"http:\/\/temp.osborneparkautorepairs.com.au\/wp-includes\/js\/wp-emoji-release.min.js?ver=4.4.1"}};
			!function(a,b,c){function d(a){var c,d=b.createElement("canvas"),e=d.getContext&&d.getContext("2d");return e&&e.fillText?(e.textBaseline="top",e.font="600 32px Arial","flag"===a?(e.fillText(String.fromCharCode(55356,56806,55356,56826),0,0),d.toDataURL().length>3e3):"diversity"===a?(e.fillText(String.fromCharCode(55356,57221),0,0),c=e.getImageData(16,16,1,1).data.toString(),e.fillText(String.fromCharCode(55356,57221,55356,57343),0,0),c!==e.getImageData(16,16,1,1).data.toString()):("simple"===a?e.fillText(String.fromCharCode(55357,56835),0,0):e.fillText(String.fromCharCode(55356,57135),0,0),0!==e.getImageData(16,16,1,1).data[0])):!1}function e(a){var c=b.createElement("script");c.src=a,c.type="text/javascript",b.getElementsByTagName("head")[0].appendChild(c)}var f,g;c.supports={simple:d("simple"),flag:d("flag"),unicode8:d("unicode8"),diversity:d("diversity")},c.DOMReady=!1,c.readyCallback=function(){c.DOMReady=!0},c.supports.simple&&c.supports.flag&&c.supports.unicode8&&c.supports.diversity||(g=function(){c.readyCallback()},b.addEventListener?(b.addEventListener("DOMContentLoaded",g,!1),a.addEventListener("load",g,!1)):(a.attachEvent("onload",g),b.attachEvent("onreadystatechange",function(){"complete"===b.readyState&&c.readyCallback()})),f=c.source||{},f.concatemoji?e(f.concatemoji):f.wpemoji&&f.twemoji&&(e(f.twemoji),e(f.wpemoji)))}(window,document,window._wpemojiSettings);
		</script>
<style type="text/css">
img.wp-smiley, img.emoji {
	display: inline !important;
	border: none !important;
	box-shadow: none !important;
	height: 1em !important;
	width: 1em !important;
	margin: 0 .07em !important;
	vertical-align: -0.1em !important;
	background: none !important;
	padding: 0 !important;
}
</style>
<link rel='stylesheet' id='font-awesome-css'  href='http://temp.osborneparkautorepairs.com.au/wp-content/themes/gd-responsive/css/font-awesome.min.css?ver=4.3.0' type='text/css' media='all' />
<link rel='stylesheet' id='gd-responsive-styles-css'  href='http://temp.osborneparkautorepairs.com.au/wp-content/themes/gd-responsive/css/bootstrap.min.css?ver=3.3.4' type='text/css' media='all' />
<link rel='stylesheet' id='gd-custom-styles-css'  href='http://temp.osborneparkautorepairs.com.au/wp-content/themes/gd-responsive/css/custom.css?ver=3.3.4' type='text/css' media='all' />
<link rel='stylesheet' id='gd-responsive-style-css'  href='http://temp.osborneparkautorepairs.com.au/wp-content/themes/gd-responsive-child-01/style.css?ver=4.4.1' type='text/css' media='all' />
<script type='text/javascript' src='http://temp.osborneparkautorepairs.com.au/wp-includes/js/jquery/jquery.js?ver=1.11.3'></script>
<script type='text/javascript' src='http://temp.osborneparkautorepairs.com.au/wp-includes/js/jquery/jquery-migrate.min.js?ver=1.2.1'></script>
<link rel='https://api.w.org/' href='http://temp.osborneparkautorepairs.com.au/wp-json/' />
<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://temp.osborneparkautorepairs.com.au/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://temp.osborneparkautorepairs.com.au/wp-includes/wlwmanifest.xml" />
<meta name="generator" content="WordPress 4.4.1" />
<link rel="canonical" href="http://temp.osborneparkautorepairs.com.au/" />
<link rel='shortlink' href='http://temp.osborneparkautorepairs.com.au/' />
<style type="text/css">
.recentcomments a {
	display:inline !important;
	padding:0 !important;
	margin:0 !important;
}
</style>


<style>
.bgwrap{background:#29378f}
.bgwrap-inner{max-width:1170px;margin:auto;}

</style>

</head>

<body class="home page page-id-701 page-template page-template-home-page page-template-home-page-php custom-bg group-blog">
<div id="page" class="hfeed site">
<header id="masthead" class="site-header" role="banner">
  <nav role="navigation">
    <div class="navbar navbar-static-top navbar-default navbar-inverse">
      <div class="container"> 
        <!-- .navbar-toggle is used as the toggle for collapsed navbar content -->
        <div class="navbar-header">
          <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-responsive-collapse"> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>
          <a class="navbar-brand" href="http://temp.osborneparkautorepairs.com.au/" title="Keith Adamsons Auto Repairs" rel="homepage">Keith Adamsons Auto Repairs</a> </div>
        <div class="navbar-collapse collapse navbar-responsive-collapse">
          <ul id="menu-primary-menu" class="nav navbar-nav navbar-right">
            <li id="menu-item-1751" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1751"><a href="http://temp.osborneparkautorepairs.com.au/brake-service/">Brake Service</a></li>
            <li id="menu-item-1752" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1752"><a href="http://temp.osborneparkautorepairs.com.au/page-a/">Page A</a></li>
            <li id="menu-item-1753" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1753"><a href="http://temp.osborneparkautorepairs.com.au/blog/">Blog</a></li>
          </ul>
        </div>
      </div>
    </div>
  </nav>
</header>
<!-- #masthead -->

<div class="bgwrap">
  <div class="bgwrap-inner">
    <div class="visible-xs mobile-blueBg"> <img class="img-responsive" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/kar-mobile-header.png"> </div>
    <p><!-- /visible-xs --></p>
    <div class="visible-sm"> <img class="img-responsive" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/KAR-mobile-layout-768px.png"> </div>
    <p><!-- /visible-sm --></p>
    <div class="visible-md"> <img class="img-responsive" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/KAR-mobile-layout-1024px.gif"> </div>
  </div>
</div>

<div id="content" class="site-content">
<div class="container">
  <div class="row">
    <div id="primary" class="col-md-12 col-lg-12">
      <main id="main" class="site-main" role="main">
        <article id="post-701" class="post-701 page type-page status-publish hentry">
          <header class="entry-header"> </header>
          <!-- .entry-header -->
          
          <div class="entry-content">
            <div id="homepage-slider"></div>
            <div class="services">
              <p><!-- /visible-md --></p>
              <div class="row">
                <section class="col-xs-offset-3 col-xs-6 col-sm-offset-0 col-sm-6 col-md-4 col-lg-2"> <img class="icon" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/brakes.png" alt="Icon">
                  </p>
                  <h3>Brake Service</h3>
                  <p>Because brakes are so important, we only recommend top brand names when Pads and Rotors need replacing. </p>
                </section>
                <section class="col-xs-offset-3 col-xs-6 col-sm-offset-0 col-sm-6 col-md-4 col-lg-2"> <img class="icon" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/battery.png" alt="Icon">
                  </p>
                  <h3>Battery health</h3>
                  <p>Batteries don&#8217;t like the cold weather and can often fail without warning leaving the motorist stranded.</p>
                </section>
                <div class="clearfix visible-sm-block"></div>
                <section class="col-xs-offset-3 col-xs-6 col-sm-offset-0 col-sm-6 col-md-4 col-lg-2"> <img class="icon" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/car-service.png" alt="Icon">
                  </p>
                  <h3>Car Service</h3>
                  <p>While your car is up on the hoist our qualified mechanics will check all major systems including your vehicle&#8217;s brakes, suspension and steering.</p>
                </section>
                <div class="clearfix visible-md-block"></div>
                <section class="col-xs-offset-3 col-xs-6 col-sm-offset-0 col-sm-6 col-md-4 col-lg-2"> <img class="icon" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/radiator.png" alt="Icon">
                  </p>
                  <h3>Cooling system</h3>
                  <p>A regular vehicle cooling system check is good insurance against getting stranded this summer.</p>
                </section>
                <div class="clearfix visible-sm-block"></div>
                <section class="col-xs-offset-3 col-xs-6 col-sm-offset-0 col-sm-6 col-md-4 col-lg-2"> <img class="icon" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/transmission.png" alt="Icon">
                  </p>
                  <h3>Transmission</h3>
                  <p>All our mechanics are fully qualified transmission technicians who train regularly to keep up to date with modern best practice.</p>
                </section>
                <section class="col-xs-offset-3 col-xs-6 col-sm-offset-0 col-sm-6 col-md-4 col-lg-2"> <img class="icon" style="margin: 0 auto" src="http://temp.osborneparkautorepairs.com.au/wp-content/uploads/2016/01/suspension.png" alt="Icon">
                  </p>
                  <h3>Suspension</h3>
                  <p>We make sure your vehicle&#8217;s ride is both smooth and safe with our complementary suspension check while your car is on the hoist.</p>
                </section>
              </div>
              <p> <!-- /row --> 
            </div>
            <p><!-- /services --></p>
          </div>
          <!-- .entry-content -->
          
          <footer class="entry-footer"> </footer>
          <!-- .entry-footer --> 
        </article>
        <!-- #post-## -->
        
        <div class="jumbotron visible-lg visible-md visible-sm"> <span class="visible-lg">.col-lg-12 —  lg indicates that the large grid is displaying. The grid stacks horizontally < 1200px.</span> <span class="visible-md">.col-md-12 —  md indicates that the medium grid is displaying. The grid stacks horizontally < 992px.</span> <span class="visible-sm">.col-sm-12 —  sm indicates that the small grid is displaying. The grid stacks horizontally < 768px.</span> <span class="visible-xs">.col-xs-12 —  xs indicates that the extra small grid is displaying. This grid is always horizontal.</span> </div>
        <!-- /jumbotron visible-lg visible-md visible-sm --> 
        
      </main>
      <!-- #main --> 
    </div>
    <!-- #primary --> 
    
  </div>
  <!-- #content -->
  
  <footer id="colophon" class="site-footer" role="contentinfo">
    <div class="container">
      <div class="row">
        <div class="col-md-6 col-lg-6">
          <p>Footer 1 info goes here</p>
        </div>
        <div class="col-md-6 col-lg-6">
          <p>Footer 2 info goes here</p>
        </div>
      </div>
      <!-- .row --> 
    </div>
    <!-- .container --> 
  </footer>
  <!-- #colophon --> 
</div>
<!-- #page --> 

<script type='text/javascript' src='http://temp.osborneparkautorepairs.com.au/wp-content/themes/gd-responsive/js/respond.min.js?ver=1.4.2'></script> 
<script type='text/javascript' src='http://temp.osborneparkautorepairs.com.au/wp-content/themes/gd-responsive/js/bootstrap.min.js?ver=3.3.4'></script> 
<script type='text/javascript' src='http://temp.osborneparkautorepairs.com.au/wp-content/themes/gd-responsive/js/skip-link-focus-fix.js?ver=20130115'></script> 
<script type='text/javascript' src='http://temp.osborneparkautorepairs.com.au/wp-includes/js/wp-embed.min.js?ver=4.4.1'></script> 

<!-- Powered by Orbisius Child Theme Creator | URL: http://club.orbisius.com/products/wordpress-plugins/orbisius-child-theme-creator/ -->

</body>
</html>
1 Like

Paul, Many thanks, works a treat! initially I had trouble figuring out where to insert the code in the Wordpress scheme of things, but I put it in header-home.php and it works great. Thanks again.

Yes it does need to be in the right place otherwise you get trapped inside bootstrap:)

Remember that there is no shame in coming out of the grid for easy sections as you can soon drop back in for the usual grid stuff. I see people struggle for hours trying to squeeze something into the grid structure when it would be so simple just to come out and use custom styles for that element.

Paul thanks, If you look at this in the Chrome mobile simulator the circular icons are still offset a small amount to the right.
Any idea why this would be?

Any help appreciated.

Hi,

The problem is that your brakes element is 150px wide but the bootstrap column of 50% is much smaller than that when the width of the screen is less than about 380px and the overflow is ignored resulting in the image looking a little bit offset.

What you need to ensure is that elements are never wider than the max-width of the container. (max-width:100%). This is easy with images because you can just set max-width:100% and height:auto and the aspect ratio is maintained.

You can do similar with background images but you need a more convoluted set up where you place the background image absolutely into a container that has padding-top in percentage maintaining the aspect ratio. However you can’t do this with sprites because you can’t resize each sprite.

Therefore it probably best to over-ride the grid css in this case and just manually center the element.

e.g.

Add this:

@media screen and (max-width:380px){
.services section{width:150px;margin:auto;float:none;padding:0;}
}

That should do what you want with any luck.

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.