Solved

col-md-12 don't appear to be same size

Posted on 2015-01-14
3
359 Views
Last Modified: 2015-01-15
therenaldiet.com/

Hi- on that site, each of the text boxes is col-md-12. But the boss pointed out to me that they are not all the same size going  down the page.

Any idea why? Thanks.
0
Comment
Question by:mel200
  • 2
3 Comments
 
LVL 50

Accepted Solution

by:
Steve Bink earned 500 total points
ID: 40551444
It is because you are nesting some of your elements, and being inconsistent with the application of element-specific CSS.

For example:
<div class="content">
  <div class="container">
    <div class="row">
      <div class="col-md-12">

        <!-- Slider (Parallax Slider) -->

        <div id="da-slider" class="da-slider" style="background-position: 2000% 0%;">
          [ ... snip ... ]
        </div>
      </div>

      <!-- Slider ends -->

      <div class="bor"></div>

      <div class="main-content">
        <div class="row">
          <div class="col-md-7 main-box">
            [ ... snip ... ]
          </div>
          <div class="col-md-5">
            <div class="main-box">
              [ ... snip ... ]
            </div>
          </div>
        </div>
      </div>

      <!-- CTA starts -->

      <div class="cta">
        <div class="row">
          <div class="col-md-9">
            [ ... snip ... ]
          </div>
          <div class="col-md-2">
            [ ... snip ... ]
          </div>
        </div>
      </div>

Open in new window

Lines 2's class="container" gives that div a specific width from Bootstrap, and a max-width from your style.  The subsequent class="row" and class="col-md-12" (3 & 4) show up "normal" - the actual box width is 970, plus 15px gutter margin on each side.  But further down, on 18, you're still in the original row while creating another one.  Any col-x-n divs there will be missing some space as Bootstrap creates yet another gutter space on the sides.

Also, look at the difference in approaches between line 19 and lines 22-23.  One is consolidated, the other is not.  For the unconsolidated approach, any styles will be additive.

Restructure the HTML to be more consistent, with a focus on de-nesting items.  A simple example of what that snippet could look like:
<div class="content">
  <div class="container">
    <div class="row">
      <div class="col-md-12">
        <!-- Slider (Parallax Slider) -->
      </div>
      <div class="bor"></div>
    </div>
    <div class="row main-content">
      <div class="col-md-7 main-box">
        [ ... snip ... ]
      </div>
      <div class="col-md-5 main-box">
          [ ... snip ... ]
      </div>
[ ... etc ... ]

Open in new window

0
 

Author Comment

by:mel200
ID: 40551476
Thanks so much.
0
 

Author Closing Comment

by:mel200
ID: 40551770
I rebuilt the page, looks good, thanks!
0

Featured Post

DevOps Toolchain Recommendations

Read this Gartner Research Note and discover how your IT organization can automate and optimize DevOps processes using a toolchain architecture.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Password hashing is better than message digests or encryption, and you should be using it instead of message digests or encryption.  Find out why and how in this article, which supplements the original article on PHP Client Registration, Login, Logo…
This article discusses how to create an extensible mechanism for linked drop downs.
The viewer will learn how to create and use a small PHP class to apply a watermark to an image. This video shows the viewer the setup for the PHP watermark as well as important coding language. Continue to Part 2 to learn the core code used in creat…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.

912 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

20 Experts available now in Live!

Get 1:1 Help Now