CODEWITHSUNDEEP
htmlcsstwitter-bootstrappadding
pfost74
pfost74

Reputation: 31

Padding with Bootstrap is off when the columns stack

I am currently redesigning my site and I am trying to use the Bootstrap framework -- I can poke my way through HTML but am still a beginner with code.

The issue I am having is that when my two columns of text get stacked on smaller screens, the padding on the second column sticks out to the left beyond that of the first as if it were floating around an image, which it isn't. I am linking via style sheets to the bootstrap core so I can't edit it directly. (I figured for me that was probably safest)

CODE:

#container {width:95%; max-width:900px; margin:0 auto;}
#main-nav {
	float:right;
	margin-top:-50px;
	max-width:500px;
}
#maincontent {width:100%; margin:10px;}

img{width: auto; max-width:105%;}
a img{border:none;}

@media screen and (max-width:1002px) {
	.img{width:auto; max-width:80%;}}


@media screen and (max-width: 957px) {
	#socialbuttons {margin-top:-45px;}
	#container {margin: 30px;}
	#container2 {margin:0 50px 10px 50px; width:100%;}
	#main-nav {margin-right: 50px;}}
	
@media screen and (max-width: 820px) {
	#container2 {width:80%}}
  <div class="wrap" id="maincontent"> <h1>Welcome to Compass Design</h1>
  <p class="col-sm-6">Innovative. Targeting. Creative. Effective Branding - keywords every marketing and design agency claims makes them unique. However, when all graphic design companies claim originality, what makes them different from the next? When you need a Graphic Designer or Print and Website Design Services, turn to Compass Design.<br/><br/>


The team at Compass Design believes in creating a visually unique brand and consistent identity for each of their clients. Their philosophy is simple: honest, friendly, and flexible design that works with your current marketing strategy. Don’t have a marketing strategy? No problem! Compass Design will create one just for you.
</p>
  </span>
    <p><span class="col-sm-6">
      Compass Design’s flexible services include custom options, as well as templates you can use on your own. This means there is a service for every budget. Whether your business is just starting out or is already established and just needs a refresh, Compass Design will work with you to reach your marketing goals without breaking the bank.<br/>
  <br/>
      
      Contact Compass Design near Rapid City, SD today to find out how they can create the marketing tools you need to catch the attention of your customers and reach your business goals!<br/><br/>
      
  <strong><span style="font-size:1.25em"> Let Compass Design create compelling print graphics and web — call 605-786-6432.</span></strong></span></p>
  </div>

Upvotes: 1

Views: 47

Answers (1)

amespower
amespower

Reputation: 917

Your right side column has a span.col-sm-6 inside the p tag, the left one has that .col-sm-6 class on the p tag itself, so both cols are picking up different css. It becomes obvious when stacked. They should be the same, remove the span and place the class on the p tag.

Upvotes: 2

Related Questions