?
Solved

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

Posted on 2015-01-14
3
Medium Priority
?
374 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

Moving data to the cloud? Find out if you’re ready

Before moving to the cloud, it is important to carefully define your db needs, plan for the migration & understand prod. environment. This wp explains how to define what you need from a cloud provider, plan for the migration & what putting a cloud solution into practice entails.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
CTAs encourage people to do something specific to show interest in your company, product or service. Keep reading to learn why CTAs should always be thought of as extremely important, albeit small, sections of websites.
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 receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…

649 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