?
Solved

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

Posted on 2015-01-14
3
Medium Priority
?
370 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 51

Accepted Solution

by:
Steve Bink earned 2000 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

Use Filtering Commands to Process Files in Linux

Learn how to manipulate data with the help of various filtering commands such as `cat`, `fmt`, `pr`, and others in Linux.

Question has a verified solution.

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

Does your audience prefer people in photos or no people? How can you best highlight what you’re selling? What are your competitors doing, and what can you do that is different and unique from them?  Continue reading to learn how to make your images …
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will the learn the benefit of plain text editors and code an HTML5 based template for use in further tutorials.
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…
Suggested Courses

777 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