Twitter Bootstrap Question posted in

How to Remove the empty Space at the Right of my Webpage? – Twitter bootstrap

This is an assignment to design a simple Responsive web page using Twitter Bootstrap where a Collapsible Menu Button appears only on extra small Devices and Just The brand Name on Larger devices.And I think I achieved that goal.

But the problem is this annoying white space towards the right of my web page,across all devices(I tested using Chrome Developer Tools).

Any Suggestions to remove the Space,as it makes the web page more compact and Nice to view.Thanks in advance. I’ve attached an image of the white space and a link to my code.

CSS Code,

/*html
{
    overflow-x: hidden;
    overflow-y: scroll;
}*/
body{
    font-family: 'Comfortaa', cursive;
}
/*Header Section*/
#brand-name{
    position: relative;
    bottom:20px;
    left: 1px;
    text-decoration:none;
}
.nav-LLC{
    border-radius: 0px;
}


}
#nav-list{
    margin-top: 10px;
}
#nav-list a {
  text-align: center;
  background-color: #e1e6ed;
  font-size: 1.1em;
  font-weight: bolder;
}
#nav-list a:hover{
    background-color: #96d4e8;
}
/*End of Header Section*/

/* Only for Extra Small Devices*/

@media (max-width: 500px){
    h1{
        font-size: 7vw;
    }
    h2{
        font-size: 7vw;
    }
}

/*Start of Body Section*/ 
h2{
    margin-top: 10px;
    margin-bottom: 20px;
    text-align: center;
    font-weight: bold;
    font-color: #0b0821;
}
.row section{

}
.row section p{
    text-align: justify;
    background-color: #e1e6ed;
}
h4{
    position: relative;
    left: 40%;*/
    font-weight: bold;
    color: #0b2730;
    /*background-color: #e1e6ed;
    margin: 0px;*/
}
/*End of Body Section*/

HTML Code,

<header>
    <nav id="nav-LLC" class="navbar navbar-default ">
        <div class="container">
            <div class="navbar-header">
                <div class="navbar-brand">
                    <a  id="brand-name" href="index.html" ><h1> Food,LLC </h1></a>
                </div>

                <div class="button-class">
                    <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapsable" aria-expanded="false" >
                    <span class="sr-only"> Toggle Navigation</span>
                    <span class="icon-bar"></span> <!--Icon Bar is three lines in the icon-->
                    <span class="icon-bar"></span>
                    <span class="icon-bar"></span>
                    </button>
                </div>

            </div><!-- Navbar-header -->
            <section class="visible-xs">
            <div id="nav-collapsable" class="collapse navbar-collapse" >
                <ul id="nav-list"  class="nav navbar-nav navbar-right">
                    <li><a href="#chicken"><span>Chicken</span></a></li>
                    <li><a href="#beef"><span>Beef</span></a></li>
                    <li><a href="#sushi"><span>Sushi</span></a></li>
                    <!--<li><a href="#"><span>Cookies</span><br></a></li>-->
                </ul>
            </div>
            </section>
        </div>
    </nav>
</header>



<div class="container">
<h2>Our Menu</h2>
<div class="row">
<section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
<h4>Chicken</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="beef" class="col-md-4 col-sm-6 col-xs-12">
<h4>Beef</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="sushi" class="col-md-4 col-sm-12 col-xs-12">
<h4>Sushi</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

</div>
</div>


<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

Link to HTMl and CSS code https://jsfiddle.net/w5v6yr9q/

link to the image https://i.stack.imgur.com/ieRok.png

Edit: Thank you so much people!! Learned something new today!

Tags:

6

Answers


  1. 0

    Remove this line in CSS

    CSS

    h4{
left:40%;/*remove this*/
}
    Login or Signup to reply.
  2. 0

    According to your jsfiddle, the tags under the sections (Chicken, Beef, Sushi). You have h4 css with position relative and “left: 40%;”.

    Give all your h4 tags a class(“menu-title” for instance).
    and give the CSS below

    .menu-title {
  position: static;
  text-align: center;
}

    Hope it helps

    Login or Signup to reply.
  3. 0

    Try adding a Div like this :

    <div class="container">
  <div class="col-12 col-sm-12 col-md-12 col-lg-12 col-xl-12"><!--  Add this Div-->
    <h2>Our Menu</h2>
    <div class="row">
      <section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
      <h4>Chicken</h4>
      <!-- following codes -->

    </div>
  </div>
</div>
    Login or Signup to reply.
  4. 0

    Please see your H4 styles below:

    h4{
    position: relative;
    /* left: 40%;*/ /* this is the issue */
    font-weight: bold;
    color: #0b2730;
  text-align:center; /* if you want to center the text */
    /*background-color: #e1e6ed;
    margin: 0px;*/
}
    Login or Signup to reply.
  5. 0

    What you need to know is there are default CSS values for HTML elements in the web, which are hidden a bit in the developer tools.
    https://www.w3schools.com/cssref/css_default_values

    For your example you need to add two things: First remove the default margin for the body. This will remove the white gaps to the edges of the viewport.

    body {
  margin: 0;
}

    Second your h4 are pulled to the right because of left: 40%, to center them flexible and on all viewports take a look at the folliwing code:

    h4 {
    position: relative /* remove this */;
    left: 40%; /* remove this */

    text-align: center; /* add this */
}

    Please keep in mind it is a better approach to style on a class like .center-headline and add your needed styles there. Then you just need to copy & paste without worries.

    Login or Signup to reply.
  6. 0

    Here you go with a solution https://jsfiddle.net/w5v6yr9q/2/

    /*html
{
	overflow-x: hidden;
	overflow-y: scroll;
}*/
body{
	font-family: 'Comfortaa', cursive;
}
/*Header Section*/
#brand-name{
	position: relative;
	bottom:20px;
	left: 1px;
	text-decoration:none;
}
.nav-LLC{
	border-radius: 0px;
}


}
#nav-list{
	margin-top: 10px;
}
#nav-list a {
  text-align: center;
  background-color: #e1e6ed;
  font-size: 1.1em;
  font-weight: bolder;
}
#nav-list a:hover{
	background-color: #96d4e8;
}
/*End of Header Section*/

/* Only for Extra Small Devices*/

@media (max-width: 500px){
	h1{
		font-size: 7vw;
	}
	h2{
		font-size: 7vw;
	}
}

/*Start of Body Section*/ 
h2{
	margin-top: 10px;
	margin-bottom: 20px;
	text-align: center;
	font-weight: bold;
	font-color: #0b0821;
}
.row section{
	
}
.row section p{
	text-align: justify;
	background-color: #e1e6ed;
}
h4{
	position: relative;
	font-weight: bold;
	color: #0b2730;
	/*background-color: #e1e6ed;
	margin: 0px;*/
}
/*End of Body Section*/
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<header>
	<nav id="nav-LLC" class="navbar navbar-default ">
		<div class="container">
			<div class="navbar-header">
				<div class="navbar-brand">
					<a  id="brand-name" href="index.html" ><h1> Food,LLC </h1></a>
				</div>
					
				<div class="button-class">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#nav-collapsable" aria-expanded="false" >
					<span class="sr-only"> Toggle Navigation</span>
					<span class="icon-bar"></span> <!--Icon Bar is three lines in the icon-->
					<span class="icon-bar"></span>
					<span class="icon-bar"></span>
					</button>
				</div>
		
			</div><!-- Navbar-header -->
			<section class="visible-xs">
			<div id="nav-collapsable" class="collapse navbar-collapse" >
				<ul id="nav-list"  class="nav navbar-nav navbar-right">
					<li><a href="#chicken"><span>Chicken</span></a></li>
					<li><a href="#beef"><span>Beef</span></a></li>
					<li><a href="#sushi"><span>Sushi</span></a></li>
					<!--<li><a href="#"><span>Cookies</span><br></a></li>-->
				</ul>
			</div>
			</section>
		</div>
	</nav>
</header>



<div class="container">
<h2>Our Menu</h2>
<div class="row">
<section id="chicken" class="col-md-4 col-sm-6 col-xs-12">
<h4 class="text-center">Chicken</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="beef" class="col-md-4 col-sm-6 col-xs-12">
<h4 class="text-center">Beef</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

<section id="sushi" class="col-md-4 col-sm-12 col-xs-12">
<h4 class="text-center">Sushi</h4>
<p>Do qui nulla et ullamco ut quis excepteur nulla amet. Eiusmod dolore tempor deserunt velit in nulla dolore ut duis dolor. Lorem ipsum duis ea ut occaecat cupidatat sint incididunt laborum ut duis ea cillum excepteur nulla velit ut. Veniam adipisicing proident esse tempor aliquip non nulla laboris esse dolore fugiat nostrud eu nulla consequat ut qui ad. Amet ad sint pariatur aliquip tempor mollit labore minim voluptate fugiat non.<a class="visible-xs" href="#nav-LLC" ><br>Back to top</a></p>
</section>

</div>
</div>



<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/bootstrap.min.js"></script>

    Remove left:40%; from h4 in CSS

    Instead use bootstrap class text-center in HTML h4 tag. It’s a clean approach.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search