Solved

Bootstrap grid question

Posted on 2014-12-22
14
163 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
  • 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
 
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
Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

 

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 500 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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

Read about why website design really matters in today's demanding market.
Get to know the ins and outs of building a web-based ERP system for your enterprise. Development timeline, technology, and costs outlined.
In this tutorial viewers will learn how to style rounded corners for elements in CSS using the border-radius property Begin with a normal styled element such as a div: To style all four corners of the div to be the same degree of roundness, use the …
This tutorial will teach you the core code needed to finalize the addition of a watermark to your image. The viewer will use a small PHP class to learn and create a watermark.

747 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

12 Experts available now in Live!

Get 1:1 Help Now