Twitter Bootstrap Question posted in

Text not being displayed correctly-Twitter bootstrap

I have some issues with my text performance because it is not getting displayed correctly in the page. Instead of the text being justified (text-align:justify) it is like all the text is being stretched in a single line. In my local development environment it is being displayed correctly. I had spent some time trying to figure it out why this is happening but still no clue.

$(document).ready(function(){
//Close the responsive menu when clicking on an item
	$('.navbar-collapse li a:not(.dropdown-toggle)').bind('click touchstart', function () {
		$('.navbar-toggle:visible').click();
    });

//Scroll if you click on an item of the navbar
	$('.navbar-collapse li a').click(function(e) {
    	e.stopPropagation();

    var eid = $(this).attr('href');
    var top = $(eid).offset().top;

    $('html, body').animate({ scrollTop: top }, 800);
  });
    $(function() {
  $("form[name='needs-validation']").validate({
    rules: {
      firstname:{ 
        pattern:"[a-zA-Z]+",
        required:true
        },
      lastname:{
        required:"true",
        pattern:"[a-zA-Z]+"
      },
      email: {
        required: true,
        email: true
      },
      zipCode: {
        pattern:"[0-9,]",
        required: true,
        minlength: 5
      }
      },
      state: {
        required: true,
      },
    //Messages errors
    messages: {
        firstname: "Please enter your firstname",
        lastname: "Please enter your lastname",
        zipCode: "Please provide your Zip Code",
        password: {
            required: "Please provide a password",
            minlength: "Your password must be at least 5 characters long"
      },
        email: "Please enter a valid email address"
    },
    submitHandler: function(form) {
      form.submit();
    }
        });
    });
});
* {
	box-sizing: border-box;
}
body, html {
	margin: 0 auto;
	margin-top: 70px;
	padding: 0;
	font-family: 'Nunito Sans', sans-serif;
	font-size: 16px;
}
.navbar-default {
	background-color: white !important;
	box-shadow: 2px 1px rgba(75, 108, 183, 0.82) !important;
}
.navbar-header {
	height: 80px;
	background-color: transparent;
}
.logo {
	height: 60px;
	width: 60px;
	margin-top: -5px;
	border: 1 solid;
	border-color: transparent;
	border-radius: 4px;
}
a {
	text-decoration: none !important;
}
.btn1, .btn2 {
	font-size: 20px;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600 ;
	padding: 1px;
	margin: 2px;
	margin-top: 10px;
	border: 5px solid transparent;
}
.btn1:hover , .btn2:hover {
	border-bottom: 5px solid;
	border-bottom-color: #4b6cb7;  /* fallback for old browsers */
	border-bottom-color: -webkit-linear-gradient(to right, #182848, #4b6cb7);  /* Chrome 10-25, Safari 5.1-6 */
	border-bottom-color: linear-gradient(to right, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */

}
.container-hero-section {
	display: grid;
	color:white;
	grid-template-columns:80px 80px;
	grid-template-rows: 80px 80px;
	width: 100%;
	height: 620px;
	max-width: 1500px 2fr;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center;;
}
.text-on-hero {
	display: grid;
	grid-column: 1 / 4;
	grid-row: 3 / 5;
	text-align:center;
	font-size: 40px;
	font-family: 'Alegreya', serif; 
	font-weight: 500; 
}
.main-content { 
	margin-top: 70px;
	width: 100%;
	text-align: justify;
	padding: 30px;
  font-stretch:normal;
	font-family: 'Nunito Sans', sans-serif;
	font-weight: 600;
}
h1 {
	font-family: 'Crimson Text', serif;
	font-weight: 600 ;
}
.iframe-container {
	margin-top: 40px;
}
.form-container {
	margin-top: 70px;
	margin-bottom: 20px;
}
.text-center {
	margin-bottom: 40px;
}
.form-labels {
	font-size: 8px;
	color:#434C5F;
	letter-spacing: 0.8px;
	padding: 10px;
	margin-bottom: 20px;
	margin-top: 20px;
}
.form-group {
	text-transform: uppercase;
	padding-top: 1px;
	padding-bottom: 1px;
	margin-right: 1px;
	margin-left: 1px; 
	width: 90%;
}
.form-text {
	text-transform: none;
}
input:hover {
	border:0;
	outline: solid;
	outline-color: azure;
}
.btn-continue {
	font-size: 10px;
	outline:0;
	border: 1px solid;
	border-color: #4b6cb7;
	border-radius: 18px;
	border-color:lightgray; 
	padding:3vmin;
	color: white;
	background-color: #4b6cb7;  /* fallback for old browsers */
	background-color: -webkit-linear-gradient(to right, #182848, #4b6cb7);  /* Chrome 10-25, Safari 5.1-6 */
	background-color: linear-gradient(to right, #182848, #4b6cb7); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */ ;
	width: 124px;
	text-transform: uppercase;
	font-weight: bold;
	margin-top: 40px;
	margin-bottom: 70px;
}

.btn-continue:hover {
	cursor: pointer;
	box-shadow:0 5px 10px rgba(0, 0, 0, 0.1);
}
.footer-wrapper {
	display: block;
	width: 100%;
	background: #74ebd5;  /* fallback for old browsers */
	background: -webkit-linear-gradient(to right, #ACB6E5, #74ebd5);  /* Chrome 10-25, Safari 5.1-6 */
	background: linear-gradient(to right, #ACB6E5, #74ebd5); /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
	height: 150px;
	padding: 10px;
}
.footer-wrapper li {
	float: right;
	list-style: none;
	color:#337ab7;
	cursor: pointer;
	font-size: 12px;
}
.footer-wrapper span {
	float: left;
	margin-right: 12px;
	margin-left: 12px;
	font-size: 24px;
}
@media (max-width: 800px) {
.logo {
		height: 40px;
		width: 40px;
	}
	.text-on-hero {
	grid-column: 1 / 4;
	grid-row: 3 / 4;
	text-align:center;
	font-size: 20px;
	font-weight: 400; 
}
	.container-hero-section {
		height: 420px;
	}
	html,body {
		margin-top: 50px;
	}
	.nav-header-right-collapse {
		background-color: white;
	}
}
@media (max-width: 485px){
	.footer-wrapper li {
		position:relative;
		top:20px;
		right:50px;
		text-align: justify;
		}
	.footer-wrapper span i {
		position: relative;
		right: -90px;
	}
}
@media (min-width: 1300px){
		body,html,h1 {
		margin: 0 auto;
		}
	.container-hero-section {
		margin-top: 120px;
	}
	.navbar-default {
		height: 100px;
		box-shadow: none !important;
	}
	.btn1,.btn2 {
		margin-top: 30px;
		font-size: 30px;
	}
	.logo {
		width: 80px;
		height: 80px;
	}
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/jquery.validation/1.15.1/jquery.validate.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>


<div class="wrapper">
	<nav class="navbar navbar-default navbar-fixed-top" id="banner">
  <div class="container navbar-container">
  	<div class="navbar-header">
      <a class="navbar-brand" href="#">
        <img alt="Brand" src="https://cdn.dribbble.com/users/2790/screenshots/1678559/ab_monogram.gif" class="logo">
      </a>
  <button class="navbar-toggle" data-toggle="collapse" data-target=".nav-header-right-collapse">
  <span class="sr-only">Toggle navigation</span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
  <span class="icon-bar"></span>
    </button>
    </div>
    <div >
  <ul class="nav navbar-nav navbar-right collapse navbar-collapse nav-header-right-collapse" role="navigation">
	<li class="btn1"><a href="#about-us"> About us</a></li>
	<li class="btn2"><a href="#contact-us">Contact</a></li>
  </ul>
		</div>  
  </div>
</nav>
<div class="container-hero-section" style="background-image: url(https://static.tumblr.com/4aa2d12cad2b611779826ebb25800842/9nimsoa/4Hymox5z5/tumblr_static_mistyforestagain.jpg);">	<p class="text-on-hero">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
	tempor incididunt ut labore et dolore magna aliqua.</p>
  </div><!--Close hero section-->
  <div id="about-us"></div>
   <section class="main">
    <div class="main-content col-lg-12">
      <h1 class="text-center"> About us </h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tellus purus, consequat et interdum sed, maximus vitae justo. Nam finibus enim nec enim condimentum luctus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Duis ac rutrum libero. Suspendisse sed tincidunt mauris, vel finibus tellus. Vestibulum sit amet velit tortor. Aliquam aliquam urna vel tristique faucibus. Duis mattis condimentum metus quis sodales. Praesent sodales imperdiet nunc et suscipit. Curabitur velit velit, scelerisque vel urna sed, fermentum dignissim sem. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse potenti.</p>

<p>Nullam massa ipsum, tempor ut sollicitudin at, bibendum nec turpis. Donec vel placerat arcu. Aenean accumsan rhoncus consequat. Nullam vel faucibus tellus. Praesent consequat metus in quam dapibus tincidunt. Cras tellus sapien, suscipit sed fringilla id, iaculis eu ex. Morbi metus dolor, sodales non dictum eget, gravida a enim. Sed porta leo vitae gravida ullamcorper.</p>

<p>Maecenas rutrum erat nisi, at bibendum ex sollicitudin eget. Fusce augue purus, efficitur nec malesuada eget, scelerisque vel metus. Nam sed rutrum arcu. Aliquam vel nunc ante. Nunc convallis libero vel aliquam convallis. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Vestibulum</p>
<!-- 16:9 aspect ratio -->
<div class="embed-responsive embed-responsive-16by9 iframe-container">
  <iframe width="80%" height="240px" src="https://www.youtube.com/embed/QijH4UAqGD8" class="embed-responsive-item"></iframe>
</div>
    </div>
      </section>
    </br>
      <div id="contact-us"></div>
      <section>
	<div class="container form-container col-lg-12">
<form class="contact-form" role="form" name="needs-validation" action="none" data-toggle="validator">
    <h1 class="text-center"> Contact us </h1>
  <div class="form-group center-block">
  <label for="input--email" id="input--email" class="form-labels control-label">Email address</label>
  <input type="email" class="form-control form-control-lg" placeholder="[email protected]">
  </div>
  <div class="form-group center-block">
<label for="input--name" id="input--name" class= "form-labels control-label">name</label>
<input type="text" name="firstname"  pattern="[a-zA-Z]+" class="form-control form-control-lg" placeholder="your first name here">
  </div>
  <div class="form-group center-block">
<label for="input-last-name" id="input-last-name" class= "form-labels control-label"> last name</label>
<input type="text" name="lastname"  pattern="[a-zA-Z]+" class="form-control form-control-lg" placeholder="your last name goes here">
  </div>
  <div class="form-group center-block">
<label for="input--zip--code" id="input--zip--code" class="form-labels control-label"> Zip code</label>
<input type="number" name="zipCode" class="form-control form-control-lg" placeholder="US zip code">
</div>
<div class="form-group center-block has-feedback">
<label for="select-state" name="state" class="form-labels control-label"> Select state</label>
<select class="form-control">
  <option value=" " >Please select your state</option>
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option value="CA">California</option>
  <option value="CO">Colorado</option>
  <option value="CT">Connecticut</option>
  <option value="DE">Delaware</option>
  <option value="DC">District Of Columbia</option>
  <option value="FL">Florida</option>
  <option value="GA">Georgia</option>
  <option value="HI">Hawaii</option>
  <option value="ID">Idaho</option>
  <option value="IL">Illinois</option>
  <option value="IN">Indiana</option>
  <option value="IA">Iowa</option>
  <option value="KS">Kansas</option>
  <option value="KY">Kentucky</option>
  <option value="LA">Louisiana</option>
  <option value="ME">Maine</option>
  <option value="MD">Maryland</option>
  <option value="MA">Massachusetts</option>
  <option value="MI">Michigan</option>
  <option value="MN">Minnesota</option>
  <option value="MS">Mississippi</option>
  <option value="MO">Missouri</option>
  <option value="MT">Montana</option>
  <option value="NE">Nebraska</option>
  <option value="NV">Nevada</option>
  <option value="NH">New Hampshire</option>
  <option value="NJ">New Jersey</option>
  <option value="NM">New Mexico</option>
  <option value="NY">New York</option>
  <option value="NC">North Carolina</option>
  <option value="ND">North Dakota</option>
  <option value="OH">Ohio</option>
  <option value="OK">Oklahoma</option>
  <option value="OR">Oregon</option>
  <option value="PA">Pennsylvania</option>
  <option value="RI">Rhode Island</option>
  <option value="SC">South Carolina</option>
  <option value="SD">South Dakota</option>
  <option value="TN">Tennessee</option>
  <option value="TX">Texas</option>
  <option value="UT">Utah</option>
  <option value="VT">Vermont</option>
  <option value="VA">Virginia</option>
  <option value="WA">Washington</option>
  <option value="WV">West Virginia</option>
  <option value="WI">Wisconsin</option>
  <option value="WY">Wyoming</option>
</select>
  </div>
<button class="btn-continue center-block" type="submit">Continue <span class="glyphicon glyphicon-send" style="margin-left: 10px;"></span></button>
  </form>
</div>
</section>
<footer>
  <div class="footer-wrapper container-fluid col-lg-12">
    <ul>
      <span><a href="#"><i class="fa fa-rss-square" aria-hidden="true"></i></a></span>
      <span><a href="#"><i class="fa fa-youtube" aria-hidden="true"></i></a></span>
      <span><a href="#"><i class="fa fa-twitter" aria-hidden="true"></i></a></span>
      <li><a href="#"> <strong>Privacy and informacion Processing Policy, etc.</strong></a></li>
      <li><a href="#"> Legal Information |</a></li>
      <li><a href="#"> Terms of use |</a></li>
      </br>
      <li><i class="fa fa-registered" aria-hidden="true"></i>2018 Lorem Impsum Corporation | </li>
      <li>Lorem Impsum Advanced Media, L.I. All rights reserved.</li>
       </ul>
     </div>
  </footer>
</div>

This is the codepen link:
https://codepen.io/manAbl/pen/RxBKEz

Tags:

4

Answers


  1. 0

    Its not a matter of text performance, just appearance. You have a line-height of 1.5px on your body, html ( CSS line:10 ). remove that and it will work

    Login or Signup to reply.
  2. 0

    Based on the inspect element, you line-height is the issue:

    body, html {
    line-height: 15px;
}

    Setting the above line-height and over helps…

    Codepen link: https://codepen.io/anon/pen/zpbGMj

    Login or Signup to reply.
  3. 0

    The problem is with the line-height in your code.

    body, html {
margin: 0 auto;
margin-top: 70px;
padding: 0;
font-family: 'Nunito Sans', sans-serif;
font-size: 16px;
line-height: 1.5px;
}

    Where you have line-height: 1.5px;, removing this line fixes the state of your text. I’m not sure if you meant to do this or not, but either way, it’s not a good idea to apply it to the entire document.

    Login or Signup to reply.
  4. 0

    Problem in your CSS, for body, html, where you have mentioned:

    line-height: 1.5px;

    This seems like a typo, it should either be:

    line-height: 1.5em;

    OR

    line-height: 15px;
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search