[2 days left] What’s wrong with your cloud strategy? Learn why multicloud solutions matter with Nimble Storage.Register Now

x
?
Solved

Bootstrap grid question

Posted on 2014-12-22
14
Medium Priority
?
217 Views
Last Modified: 2014-12-22
Hi, on this site: renalmeals.com/responsive

I have two segments that are col-md-12 column, but they are different widths. Here's a screenshot. I can't figure out how to get them the same width.

screenshot
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
  • 7
  • 6
14 Comments
 
LVL 13

Expert Comment

by:Jesus Rodriguez
ID: 40513696
Can I see the code? Looks like one is outside the wrapper or content wrapper
0
 
LVL 58

Expert Comment

by:Gary
ID: 40513699
You have multiple nested rows
See my article for the how to
http://www.experts-exchange.com/A_15179-Bootstrap-Masterclass-Part-1.html

Basically
Container > row > col-xx-x

Not
Container > row > row > col-xx-x
0
 

Author Comment

by:mel200
ID: 40513704
Ok, I see what you mean, Gary, thanks, I'll read the article.
0
Looking for a new Web Host?

Lunarpages' assortment of hosting products and solutions ensure a perfect fit for anyone looking to get their vision or products to market. Our award winning customer support and 30-day money back guarantee show the pride we take in being the industry's premier MSP.

 
LVL 58

Expert Comment

by:Gary
ID: 40513709
Each row you add moves the margin left and right by 15px, so you need to nest them correctly so the col-xx-x class negates the negative margin.

edit
You can add another row inside the col class
0
 

Author Comment

by:mel200
ID: 40513757
Ok, thanks for that. I have it all aligned now, but can't quite figure out why the navigation is still more narrow. I'll keep working at it, but maybe it's obvious to you?
0
 
LVL 58

Expert Comment

by:Gary
ID: 40513768
You still have nested rows.
Seperate your content like this, will make it easier to follow

<div class="container">

<div class="row">
Your header bits here
</div>

<div class="row">
Your nav bits here
</div>

<div class="row">
Your body bits here
</div>

<div class="row">
Your footer bits here
</div>

</div>

Open in new window

0
 
LVL 58

Expert Comment

by:Gary
ID: 40513841
Looking better
Coupla things...
Your header image is a set width - you should use percentages and set the height to auto

Don't use background colors on row or col- class elements - add a div inside the element and set the background color on that
0
 

Author Comment

by:mel200
ID: 40513973
Hi, Gary,

I hadn't made any changes between 13-18 and now. So the comment about still having nested rows is not valid, is that right? I still have a narrow nav, I'll make the changes on the background colors. Thanks.
0
 

Author Comment

by:mel200
ID: 40513986
Ok, I took the color style off the row and added another div, but now the row is too wide again. I have:

<div class="container">
      <div class="row clearfix"><div  style="background-color:#c6c4c5;">
            <div class="col-md-6 column"><h2>Variety</h2><p>Renal Meals is a sister site of MagicKitchen.com. Our chefs and nutritionists have been working overtime to meet the need for more delicious frozen renal meals. CEO Greg and President Michelle have listened to our customers and created the MK Meals Special menu to cater to those with health issues. </p>
          <p>The challenge they set forth to the chefs this last year was, &quot;Create tasty, healthy meals for people on renal diets.&quot;</p>
        <p>We think our chefs came through with flying colors.</p>
            </div>
            <div class="col-md-6 column"><h2>Information</h2>       
<p>The best short explanation we've seen of renal meals is provided by AAKP: &quot;Prior to starting hemodialysis, patients are often taught how to reduce the amount of protein in their diet with the hope that by doing this, the need for dialysis might be delayed. However, once dialysis is initiated, dietitians begin to do the opposite and educate patients on ways to increase their protein intake.&quot;</p>
              <p>Those are the rules our meals are based on. But the chefs have created meals like Shrimp &amp; Vegetable Linguine, and Cheese Ravioli with Meat Sauce, to create an incredible <a href="http://www.magickitchen.com/info/meal-delivery-service.html" target="_blank">meal delivery service.</a></p></p>
            </div>
      </div>
      <div class="row clearfix" style="background-color:#c6c4c5;">
            <div class="col-md-6 column"><h2>Testimonials</h2> <p>&quot;I was so happy that my sister-in-law found your  website. We were at our wits end as our father was told that he had to eat renal meals. I found that your menu fit into what we were looking for. He is  very happy with the renal meals and says that they are very tasty. <br />
              <br />
              I have not found  another company that meets the &quot;renal&quot; requirements as well as yours  does. You also prepare a meal that looks and tastes great. The meals are well  balanced and look like that they were prepared by specialists along with Chefs.  My father asked me to order another meal pack just today.&quot;<br />
              </p>
          <p>Kathy V.</p>
            </div>
            <div class="col-md-6 column"><h2>Order</h2> <p>Does that make your mouth water? Buy Renal Meals Online.</p>
          <h3><strong><a href="http://www.magickitchen.com/menu/MKMPREREN.html">Order now!</a></strong></h3>
          <p>And read our <a href="10-ways.html">10 ways to eat in moderation on the Renal Diet.</a></p>
          <p>Buying frozen renal meals online is an easy way to get the proper nutrition for your condition. Try us out today!</p>
      <p>&nbsp;</p>
            </div></div>
      </div>
0
 
LVL 58

Expert Comment

by:Gary
ID: 40513988
Dunno, let me know when the changes are online.
0
 
LVL 58

Expert Comment

by:Gary
ID: 40514003
Set the header image width to 100%

Your body content should be like this

<div class="row clearfix">

	<div class="col-md-6 column">
		<div style="background-color:#c6c4c5;">
		Variety...
		</div>
	</div>
	<div class="col-md-6 column">
		<div style="background-color:#c6c4c5;">
		Information...
		</div>
	</div>
</div>
<div class="row clearfix">
	<div class="col-md-6 column">
		<div style="background-color:#c6c4c5;">
		Testimonials...
		</div>
	</div>
	<div class="col-md-6 column">
		<div style="background-color:#c6c4c5;">
		Order...
		</div>
	</div>
</div>

Open in new window

0
 

Author Comment

by:mel200
ID: 40514029
OK, I did that... but I want the whole body section to be colored, not small boxes like that.  The width all looks great now, though, thanks!
0
 
LVL 58

Accepted Solution

by:
Gary earned 2000 total points
ID: 40514077
Replace your gray area with this

<div class="row">
	<div class="col-md-12 column">
		<div style="background-color:#c6c4c5;overflow:auto">



	<div class="col-md-6 column">
		<h2>Variety</h2><p>Renal Meals is a sister site of MagicKitchen.com. Our chefs and nutritionists have been working overtime to meet the need for more delicious frozen renal meals. CEO Greg and President Michelle have listened to our customers and created the MK Meals Special menu to cater to those with health issues. </p>
          <p>The challenge they set forth to the chefs this last year was, "Create tasty, healthy meals for people on renal diets."</p>
        <p>We think our chefs came through with flying colors.</p>
		</div>

	<div class="col-md-6 column">

		<h2>Information</h2> 	
<p>The best short explanation we've seen of renal meals is provided by AAKP: "Prior to starting hemodialysis, patients are often taught how to reduce the amount of protein in their diet with the hope that by doing this, the need for dialysis might be delayed. However, once dialysis is initiated, dietitians begin to do the opposite and educate patients on ways to increase their protein intake."</p>
		  <p>Those are the rules our meals are based on. But the chefs have created meals like Shrimp &amp; Vegetable Linguine, and Cheese Ravioli with Meat Sauce, to create an incredible <a target="_blank" href="http://www.magickitchen.com/info/meal-delivery-service.html">meal delivery service.</a></p><p></p>
		</div>






	<div class="col-md-6 column">

		<h2>Testimonials</h2> <p>"I was so happy that my sister-in-law found your  website. We were at our wits end as our father was told that he had to eat renal meals. I found that your menu fit into what we were looking for. He is  very happy with the renal meals and says that they are very tasty. <br>
		  <br>
		  I have not found  another company that meets the "renal" requirements as well as yours  does. You also prepare a meal that looks and tastes great. The meals are well  balanced and look like that they were prepared by specialists along with Chefs.  My father asked me to order another meal pack just today."<br>
		  </p>
          <p>Kathy V.</p>

	</div>
	<div class="col-md-6 column">

		<h2>Order</h2> <p>Does that make your mouth water? Buy Renal Meals Online.</p>
          <h3><strong><a href="http://www.magickitchen.com/menu/MKMPREREN.html">Order now!</a></strong></h3>
          <p>And read our <a href="10-ways.html">10 ways to eat in moderation on the Renal Diet.</a></p>
          <p>Buying frozen renal meals online is an easy way to get the proper nutrition for your condition. Try us out today!</p>
      <p>&nbsp;</p>

	</div>

</div></div></div>

Open in new window

0
 

Author Closing Comment

by:mel200
ID: 40514087
Thanks for your patience.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

This article was originally published on Monitis Blog, you can check it here . Today it’s fairly well known that high-performing websites and applications bring in more visitors, higher SEO, and ultimately more sales. By the same token, downtime…
When it comes to security, close monitoring is a must. According to WhiteHat Security annual report, a substantial number of all web applications are vulnerable always. Monitis offers a new product - fully-featured Website security monitoring and pr…
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…
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.

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