seo Question posted in
Some basic information to get you started with this can be found here.

column adjustments using Bootstrap & HTML – SEO

For some reason, when I view my webpage on my desktop (normal window width), the columns seem to be fine. However, when I resize my window, some columns tend to be higher than other columns.

Code: (Please resize window for weird columns)

<!DOCTYPE html>
<html>
  <head>
	<title>Propel WD</title>
	<link rel="shortcut icon" href="/Users/Ryan/Downloads/LAPTOP3.JPG">
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
	integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
	<link rel="stylesheet" href="css/animations.css">
	<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
	integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
	<link href='http://fonts.googleapis.com/css?family=Lato&subset=latin,latin-ext' rel='stylesheet' type='text/css'>
	<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
	<style>
	  .opacityChange {
		position: relative;
		-webkit-animation: myfirst 1s linear 0s 1 alternate; /* Chrome, Safari, Opera */
		animation: myfirst 1s linear 0s 1 alternate;
	  }

	  /* Chrome, Safari, Opera */
	  @-webkit-keyframes myfirst {
		0%   {opacity: 0.0;}
		25%  {opacity: 0.25;}
		50%  {opacity: 0.5;}
		75%  {opacity: 0.75;}
		100% {opacity: 1.0;}
	  }

	  /* Standard syntax */
	  @keyframes myfirst {
	    0%   {opacity: 0.0;}
		25%  {opacity: 0.25;}
		50%  {opacity: 0.5;}
		75%  {opacity: 0.75;}
		100% {opacity: 1.0;}
	  }
	  
	  .module {
		background: white;
		margin: 3%;
		> h2 {
		  padding: 1rem;
		  margin: 0 0 0.5rem 0;
		}
		> p {
		  padding: 0 1rem;
		}
		/*animation: widen 10s linear alternate infinite;*/
	  }

	  .stripe-1 {
		color: white;
		background: repeating-linear-gradient(
		  45deg,
		  #ED6B61,
		  #ED6B61 10px,
		  #F44336 10px,
		  #F44336 20px
		);
	  }
	  
	  hr {
	    height: 0.1px;
	    background-color: gainsboro;
	  }
	</style>
  </head>
  <body id="myPage" data-spy="scroll" data-target=".navbar" data-offset="60" class="text-center" style="margin: 40px; font-family: Lato;">
	<nav class="navbar navbar-default navbar-fixed-top" style="background-color: #F44336; border-bottom: none;">
	  <div class="container">
		<div class="navbar-header" style="color: white;">
		  <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>
			<span class="icon-bar"></span>                        
		  </button>
		  <a class="navbar-brand" href="#myPage"><div style="color: white; font-size: 16px;">Propel WD <span class="glyphicon glyphicon-circle-arrow-up"></span></div></a>
		</div>
		<div class="collapse navbar-collapse" id="myNavbar">
		  <ul class="nav navbar-nav navbar-right">
			<li><a href="#"><div style="color: white; font-size: 13px;"><span class="glyphicon glyphicon-home"></span></div></a></li>
			<li><a href="file://localhost/Applications/propelOMS%3EAbout.html"><div style="color: white; font-size: 13px;">ABOUT</div></a></li>
			<li><a href="file://localhost/Applications/propelOMS%3EServices.html"><div style="color: white; font-size: 13px;">SERVICES</div></a></li>
			<li><a href="file://localhost/Applications/propelOMS%3EPricing.html"><div style="color: white; font-size: 13px;">PRICING</div></a></li>
			<li><a href=""file://localhost/Applications/propelOMS%3EOI.html"><div style="color: white; font-size: 13px;">QUESTIONS</div></a></li>
			<li><a href="file://localhost/Applications/propelOMS%3EContact.html"><div style="color: white; font-size: 13px;">CONTACT</div></a></li>
			<li><a href="file://localhost/Applications/propelOMS%3ETC.html" onclick="window.open('file://localhost/Applications/propelOMS%3ETC.html', 'newwindow', 'width=400, height='); return false;"><div style="color: white; font-size: 13px;">TERMS</div></a></li>
		  </ul>
		</div>
	  </div>
	</nav>
	<div class="jumbotron text-center" style="margin-left: -40px; margin-right: -40px; color: white; background-color: #F44336;">
	  <h1>Propel Web Design <span class="glyphicon glyphicon-circle-arrow-up"></span></h1>
	  <h3>Where websites matter</h3> 
	</div>
	<hr>
	<h2 class="stripe-1" style="padding-top: 30px; padding-bottom: 30px; margin-right: 25%; margin-left: 25%;">Why Choose Us?</h2>
	<hr>
	<article id="wcu" class="opacityChange">
	  <div class="module">
		<div class="jumbotron stripe-1" style="background-color: #F44336; color: white; padding: 40px;">
		  <h3 style="letter-spacing: 1px;">
			Here at Propel Web Design, we love to make stylish and fancy websites. For prices
			as low as &#x00a3;300, we could make a masterpiece! We also have a huge variety
			of types of websites! Business websites, Information websites and much more!
			Our websites all have SEO, Responsive Design, 10 free stock images. Go ahead! 
			Make a website with us!
		  </h3>
		</div>
	  </div>
	  <hr>
	  <div class="container">
		<div class="module">
		  <div class="jumbotron stripe-1" style="background-color: #F44336; color: white; overflow: scroll;">
			<div class="col-sm-4">
			  <span class="glyphicon glyphicon-gift" style="font-size: 50px;"></span>
			  <span class="glyphicon glyphicon-star" style="font-size: 50px;"></span>
			  <h4 style="font-size: 19px;">AMAZING WEBSITES</h4>
			  <br>
			  <p style="font-size: 15px;">
				Our brochure websites are made for small companies who want to get 
				themselves online. We will try to make your website look professional and
				adequate.
			  </p>
		     </div>
			 <div class="col-sm-4">
			   <span class="glyphicon glyphicon-phone" style="font-size: 50px;"></span>
			   <span class="glyphicon glyphicon-envelope" style="font-size: 50px;"></span>
			   <h4 style="font-size: 19px;">JUST AN EMAIL OR TELEPHONE CALL AWAY</h4>
			   <br>
			   <p style="font-size: 15px;" class="ni">
				 Our blogs are made for people who want to share their day to day life with
				 the world. We will try to make your website fancy and as personalised as
				 possible.
			   </p>
			 </div>
			 <div class="col-sm-4">
			   <span class="glyphicon glyphicon-briefcase" style="font-size: 50px;"></span>
			   <span class="glyphicon glyphicon-wrench" style="font-size: 50px;"></span>
			   <h4 style="font-size: 19px;">HARD WORKING</h4>
			   <br>
			   <p style="font-size: 15px;">
				 Our personal websites are for people who want to talk about the recent
				 trends and other controversial things. We will try to make your website
				 look clean and well laid out. 
			   </p>
			 </div>
			 <div class="col-sm-4">
			   <span class="glyphicon glyphicon-heart" style="font-size: 50px;"></span>
			   <span class="glyphicon glyphicon-certificate" style="font-size: 50px;"></span>
			   <h4 style="font-size: 19px;">PASSIONATE</h4>
			   <br>
			   <p style="font-size: 15px;">
				 Our informational websites are for those who want to teach others online
				 and share their passions and interests. We will try to make your website
				 fun and easy to navigate.
			   </p>
			 </div>
			 <div class="col-sm-4">
			   <span class="glyphicon glyphicon-gbp" style="font-size: 50px;"></span>
			   <span class="glyphicon glyphicon-credit-card" style="font-size: 50px;"></span>
			   <h4 style="font-size: 19px;">AFFORDABLE</h4>
			   <br>
			   <p style="font-size: 15px;">
				 Our informational websites are for those who want to teach others online
				 and share their passions and interests. We will try to make your website
				 fun and easy to navigate.
			   </p>
			 </div>
			 <div class="col-sm-4">
			   <span class="glyphicon glyphicon-th" style="font-size: 50px;"></span>
			   <span class="glyphicon glyphicon-sort-by-alphabet" style="font-size: 50px;"></span>
			   <h4 style="font-size: 19px;">ALL YOU NEED</h4>
			   <br>
			   <p style="font-size: 15px;">
				 Our informational websites are for those who want to teach others online
				 and share their passions and interests. We will try to make your website
				 fun and easy to navigate.
			   </p>
			 </div>
		   </div>
		</div>
	  </div>
	  <hr>
	  <div class="container">
		<div class="module">
		  <div class="jumbotron stripe-1" style="background-color: #F44336; color: white; overflow: scroll;">
			<div class="col-sm-3">
			  <span class="glyphicon glyphicon-lock" style="font-size: 50px;"></span>
			  <span class="glyphicon glyphicon-signal" style="font-size: 50px;"></span>
			  <h4 style="font-size: 19px;">SEO</h4>
			  <br>
			  <p style="font-size: 15px;">
				All of our packages include SEO, Search Engine Optimisation. We've got 
				SEO on the top three browsers in the world. Bing, Yahoo and Google. 
				This will be useful when it comes to attracting more customers since 
				people will be able to view your website on any browser!
			  </p>
			 </div>
			 <div class="col-sm-3">
			   <span class="glyphicon glyphicon-user" style="font-size: 50px;"></span>
			   <h4 style="font-size: 19px;">DOMAIN NAMES</h4>
			   <br>
			   <p style="font-size: 15px;" class="ni">
				 Although our domain names are hosted by 3rd party hosters, we've chosen
				 the #1 website hosting service in the UK, GoDaddy. We've got a wide 
				 variety of domain names like .com, .uk, .co.uk., .site and many more.
			   </p>
			 </div>
			 <div class="col-sm-3">
			   <span class="glyphicon glyphicon-info-sign" style="font-size: 50px;"></span>
			   <h4 style="font-size: 19px;">HD STOCK IMAGES</h4>
			   <br>
			   <p style="font-size: 15px;">
				 Our HD Stock Images come from Adobe Stock Images. Their library has over
				 44 million photos so you could be picky with the size and content of the
				 image. You know what they say! Pictures are worth a thousand words!
			   </p>
			 </div>
			 <div class="col-sm-3">
			   <span class="glyphicon glyphicon-info-sign" style="font-size: 50px;"></span>
			   <h4 style="font-size: 19px;">RESPONSIVE DESIGN</h4>
			   <br>
			   <p style="font-size: 15px;">
				 All of our websites are 100% responsive so that users will also be able
				 to see your websites no matter how big or small their screen is! From a
				 IPhone to an IMac, you'll still get to view it.
			   </p>
			 </div>
		   </div>
		</div>
	  </div>
	  <hr>
	</article>
  </body>
</html>
Tags:

2

Answers


  1. 0

    If I’m understanding correctly, you have a responsive website, which resizes depending on the size of the browser, therefore when the browser window width is decreased the columns resize and all of the text remains and with nowhere to go it expands downwards, causing the text/images in that column to be longer and skinnier. I didn’t see anything “weird” besides that.

    I see it causes multiple problems with your site, I haven’t dealt with any completely responsive sites, But what I would recommend is that you set minimum and maximum widths, with the min-width and max-width in CSS.

    Hope that helped!

    Login or Signup to reply.
  2. 0

    To clarify, are you referring to the column inconsistencies in the section with “Amazing Websites”, “Just an E-Mail or Telephone Call Away”, etc.?

    If so—from the looks of it, it seems you aren’t wrapping each “row” of columns in <div class="row"></div> tags.

    For Bootstrap’s grid to work optimally, wrap each row of columns in a “row” class, like so (or check out this solution in your context on JSFiddle):

    <style>
    .box {
        margin-top: 20px;
        padding: 15px;
        border: 2px solid grey;
    }
</style>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" 
integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">

<div class="container">
    <div class="row">
        <div class="col-sm-4 box">
            <h2>1st Row, 1st Column</h2>
        </div>

        <div class="col-sm-4 box">
            <h2>1st Row, 2nd Column</h2>
        </div>

        <div class="col-sm-4 box">
            <h2>1st Row, 3rd Column</h2>
        </div>
    </div>

    <div class="row">
        <div class="col-sm-4 box">
            <h2>2nd, 1st Column</h2>
        </div>

        <div class="col-sm-4 box">
            <h2>2nd Row, 2nd Column</h2>
        </div>

        <div class="col-sm-4 box">
            <h2>2nd Row, 3rd Column</h2>
        </div>
    </div>
</div>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search