Solved

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

Posted on 2015-01-14
3
361 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

Master Your Team's Linux and Cloud Stack

Come see why top tech companies like Mailchimp and Media Temple use Linux Academy to build their employee training programs.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
tutorial for ebay api 3 35
Eloquent ORM manual paginator defaults to simple 2 24
CSS: How do I override in-line styling 11 15
Can't get js include to work in html file 8 15
Developer portfolios can be a bit of an enigma—how do you present yourself to employers without burying them in lines of code?  A modern portfolio is more than just work samples, it’s also a statement of how you work.
FAQ pages provide a simple way for you to supply and for customers to find answers to the most common questions about your company. Here are six reasons why your company website should have a FAQ page
In this tutorial viewers will learn how to embed custom externally-hosted Google Fonts using the Google Font API in CSS Go to the Google Fonts website at google.com/fonts: Browse or search based on font properties or name to find a suitable font for…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

809 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