My navbar at the top of the page is overflowing the viewport on smaller devices. I found this on my personal device and in the Chrome developer tools.
Starting at 575px there is a whitespace on the white side of the screen. As the viewport decreases, the whitespace inversely increases. At the smallest point the content takes up about 25% and the remaining 75% is white.
How can I make this extra whitespace go away? Thanks!
< script src = "https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity = "sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin = "anonymous" > < /script>
<
script src = "https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js"
integrity = "sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin = "anonymous" > < /script>
<
script src = "https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity = "sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin = "anonymous" > < /script>
body {
position: relative;
}
h3 {
text-align: center;
}
nav {
position: inherit;
}
#home {
background-image: url(jumbotronNewResized.jpg);
text-align: center;
margin-top: 55px;
background-size: 100%;
background-repeat: no-repeat;
}
#lowerJumbotron {
color: white;
}
i {
padding-right: 8px;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="fontawesome-free-5.11.2-web/css/all.min.css" rel="stylesheet">
<title>My App!</title>
</head>
<body data-spy="scroll" data-target="#topPageNavbar" data-offset="100">
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top" id="topPageNavbar">
<a class="navbar-brand font-weight-bold" href="#">My App Page</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar" aria-controls="topNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="topNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#download">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-xs-0">
<input class="form-control mr-sm-2" type="email" placeholder="Email Address" aria-label="Email Address">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success bg-success my-2 my-sm-0 text-white font-weight-bold" type="submit">Login</button>
</form>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" id="home">
<div class="container">
<h1 class="display-4">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="my-2">
<p id="lowerJumbotron">Want to keep updated? Join our mailing list!</p>
<form>
<div class="form-row justify-content-center">
<div class="col-auto">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">#</div>
</div>
<input type="email" class="form-control" placeholder="Your Email Address">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div id="about" class="container">
<h3 class="my-3">This is all about the app!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<hr class="container">
<div id="features" class="container mt-4">
<h3 class="mb-3">Check out some of the different features!</h3>
<div class="card-deck">
<div class="card">
<img src="seedsResized.jpg" class="card-img-top" alt="Seeds">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-seedling icon"></i>Gather Your Seed</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="sprout.jpg" class="card-img-top" alt="Sprouting Seeds">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-leaf icon"></i>Nuture Your Field</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="harvestResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-tractor icon"></i>Receive Your Harvest</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
</div>
<div class="card-deck mt-4">
<div class="card">
<img src="calendar.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-tasks"></i>Plan Your Activity</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="meetingResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-handshake"></i>Schedule Your Success</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="dashboardResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-chart-line"></i>Monitor Your Growth</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
</div>
</div>
<div id="download"></div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
</html>
Link of the Website With Extra Whitespace On Small Screens
It has nothing to do with the navigation, the issue is with the horizontal ruler <hr> having a 100% width; add the following CSS to resolve:
hr.container {
width: auto;
}
complete working snippet:
body {
position: relative;
}
h3 {
text-align: center;
}
nav {
position: inherit;
}
#home {
background-image: url(jumbotronNewResized.jpg);
text-align: center;
margin-top: 55px;
background-size: 100%;
background-repeat: no-repeat;
}
#lowerJumbotron {
color: white;
}
i {
padding-right: 8px;
}
hr.container {
width: auto;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="fontawesome-free-5.11.2-web/css/all.min.css" rel="stylesheet">
<body data-spy="scroll" data-target="#topPageNavbar" data-offset="100">
<nav class="navbar navbar-expand-lg navbar-dark bg-secondary fixed-top" id="topPageNavbar">
<a class="navbar-brand font-weight-bold" href="#">My App Page</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#topNavbar" aria-controls="topNavbar" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="topNavbar">
<ul class="navbar-nav mr-auto">
<li class="nav-item active">
<a class="nav-link" href="#home">Home <span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="#about">About</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#features">Features</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#download">Download</a>
</li>
</ul>
<form class="form-inline my-2 my-xs-0">
<input class="form-control mr-sm-2" type="email" placeholder="Email Address" aria-label="Email Address">
<input class="form-control mr-sm-2" type="password" placeholder="Password" aria-label="Password">
<button class="btn btn-outline-success bg-success my-2 my-sm-0 text-white font-weight-bold" type="submit">Login</button>
</form>
</div>
</nav>
<div class="jumbotron jumbotron-fluid" id="home">
<div class="container">
<h1 class="display-4">My Awesome App!</h1>
<p class="lead">This is why YOU should download this fantastic app!</p>
<hr class="my-2">
<p id="lowerJumbotron">Want to keep updated? Join our mailing list!</p>
<form>
<div class="form-row justify-content-center">
<div class="col-auto">
<div class="input-group">
<div class="input-group-prepend">
<div class="input-group-text">#</div>
</div>
<input type="email" class="form-control" placeholder="Your Email Address">
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-success">Submit</button>
</div>
</div>
</form>
</div>
</div>
<div id="about" class="container">
<h3 class="my-3">This is all about the app!</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<hr class="container">
<div id="features" class="container mt-4">
<h3 class="mb-3">Check out some of the different features!</h3>
<div class="card-deck">
<div class="card">
<img src="seedsResized.jpg" class="card-img-top" alt="Seeds">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-seedling icon"></i>Gather Your Seed</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="sprout.jpg" class="card-img-top" alt="Sprouting Seeds">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-leaf icon"></i>Nuture Your Field</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="harvestResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-tractor icon"></i>Receive Your Harvest</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
</div>
<div class="card-deck mt-4">
<div class="card">
<img src="calendar.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-tasks"></i>Plan Your Activity</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="meetingResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-handshake"></i>Schedule Your Success</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
<div class="card">
<img src="dashboardResized.jpg" class="card-img-top" alt="...">
<div class="card-body">
<h5 class="card-title"><i class="fas fa-chart-line"></i>Monitor Your Growth</h5>
<p class="card-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
Click This Link!
</div>
</div>
</div>
</div>
<div id="download"></div>
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js" integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js#1.16.0/dist/umd/popper.min.js" integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js" integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6" crossorigin="anonymous"></script>
</body>
Related
I have a component where a Bootstrap 4 auto-expand column is wrapping to another row. The presence of an element with the "text-truncate" class and long text is causing Chrome to vertically stack the column element under the row where it belongs.
In the snippet below, the <div> with ID, problem-div will wrap and consume the whole line if the child <span> element has Boostrap 4 class text-truncate applied and the element contains lengthy text. Remove the text-truncate class and the problem-div element will consume the unused portion of the first row in its container.
As it stands now, I can get the truncation feature for the child content - or I can get the parent column to fill the unused part of the first row of its parent, but not both. How do I get both at the same time?
img {
width: 16px;
height: 16px;
}
label {
margin: 0;
font-weight: 600;
}
.form-text {
margin: 0;
}
#problem-div {
background-color: #e0FFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="container-fluid">
...
<!-- lots of stuff -->
<div class="card">
<div class="card-header bg-warning">
<div class="row">
<div class="col-auto text-nowrap">
<img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<div class="col row small">
<div class="form-group col-3">
<label>ID</label>
<span class="form-text">1234567</span>
</div>
<div class="form-group col-3">
<label>Name</label>
<span class="form-text">My Name</span>
</div>
<div class="form-group col-3">
<label>Type</label>
<span class="form-text">Category-A</span>
</div>
<div class="form-group col-3">
<label>Code</label>
<span class="form-text">ABCDEFG</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<div class="col small">
<!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->
<div id="problem-div" class="text-truncate">
<label>Display Field Label</label>
<span class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>
</div>
...
<!-- more stuff -->
</body>
When a flex item contains child elements with text that should be truncated, layout can be broken.
My first solution is add min-width: 0 to problem-div's parent (take a look at css trick article: https://css-tricks.com/flexbox-truncated-text/):
img {
width: 16px;
height: 16px;
}
label {
margin: 0;
font-weight: 600;
}
.form-text {
margin: 0;
}
#problem-div {
background-color: #e0FFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="container-fluid">
...
<!-- lots of stuff -->
<div class="card">
<div class="card-header bg-warning">
<div class="row">
<div class="col-auto text-nowrap">
<img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<div class="col row small">
<div class="form-group col-3">
<label>ID</label>
<span class="form-text">1234567</span>
</div>
<div class="form-group col-3">
<label>Name</label>
<span class="form-text">My Name</span>
</div>
<div class="form-group col-3">
<label>Type</label>
<span class="form-text">Category-A</span>
</div>
<div class="form-group col-3">
<label>Code</label>
<span class="form-text">ABCDEFG</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<div class="col small" style="min-width: 0">
<!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->
<div id="problem-div" class="text-truncate">
<label>Display Field Label</label>
<span class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>
</div>
...
<!-- more stuff -->
</body>
Another solution is add overflow: hidden to problem-div's parent:
img {
width: 16px;
height: 16px;
}
label {
margin: 0;
font-weight: 600;
}
.form-text {
margin: 0;
}
#problem-div {
background-color: #e0FFFF;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" rel="stylesheet" />
<body class="container-fluid">
...
<!-- lots of stuff -->
<div class="card">
<div class="card-header bg-warning">
<div class="row">
<div class="col-auto text-nowrap">
<img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<div class="col row small">
<div class="form-group col-3">
<label>ID</label>
<span class="form-text">1234567</span>
</div>
<div class="form-group col-3">
<label>Name</label>
<span class="form-text">My Name</span>
</div>
<div class="form-group col-3">
<label>Type</label>
<span class="form-text">Category-A</span>
</div>
<div class="form-group col-3">
<label>Code</label>
<span class="form-text">ABCDEFG</span>
</div>
</div>
</div>
</div>
<div class="card-body">
<div class="row">
<div class="col-auto text-nowrap invisible"> <img src=".../icon.png" />
<h6 class="pl-1 mt-1 font-weight-bold float-right">Label</h6>
</div>
<!-- New CSS style -->
<div class="col small" style="overflow: hidden;">
<!-- Problem Div, breaks the auto-fill feature of its parent when "text-truncate" class is applied. -->
<div id="problem-div" class="text-truncate">
<label>Display Field Label</label>
<span class="form-text">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span>
</div>
</div>
</div>
</div>
</div>
...
<!-- more stuff -->
</body>
Hope this help.
I'm experiencing an odd issue with the sticky positioning feature that's interfering with the scroll positioning.
My intention is fairly common: keep an advertisement in a sidebar always visible when the visitor scrolls the page.
It does work as per definition as you can see in the code below — or in the Fiddle if you prefer:
body {
margin: 6rem;
}
img {
width: 100%;
height: 100%;
object-fit: cover;
}
.sidebar .ads {
position: sticky;
top: 1rem;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="container">
<div class="row">
<section class="col-md-10 listing">
<div class="row">
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card-deck">
<div class="card" data-mh="card">
<a href="">
<img class="card-img-top thumbnail" src="https://orig00.deviantart.net/63b7/f/2013/041/9/d/free_youtube_thumbnail_template_by_imaura-d5ugja7.png" alt="Thumbnail" />
</a>
<div class="card-block">
<h3 class="card-title d-flex align-items-center hidden-sm-down lang-en">
Title
</h3>
Et aliquip non culpa pariatur quis et consectetur dolor eu laborum in nisi voluptate ut commodo dolore dolore anim est et in eu voluptate velit nulla nisi occaecat anim ut.
</div>
</div>
</div>
</div>
</div>
</section>
<section class="col-md-2 hidden-sm-down sidebar">
<div class="ads">
Sticky content
</div>
</section>
</div>
</div>
<div class="hidden-sm-up">
<br /><br /><br /><br />
</div>
However, if the real sticky content takes a while to load, which is very common with Google AdSense and alike, and the user starts scrolling down the page (or press Page Down, End, arrows...) when the said slow content finally finishes loading the whole page scrolls to the top.
I've debugged my JS to make sure it wasn't my fault. Also, when I removed the position: sticky; declaration jumping stopped.
More important than how could I fix this, I would like to know why this is happening
I'm making a row with 2 equal width columns. First one contains text and the second one an image. On lg/md/sm screen text will go left and the image in right as below code:
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="text-block">
<h1>WordPress Theme Development</h1>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h3>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6">
<div class="img-block text-center">
<img src="assets/pics/wordpress.png" alt="WordPress">
</div>
</div>
</div>
But on xs screen, I want the image top and text at the bottom. That's why I tried this below code which I followed from here but it's not working
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-push-12">
<div class="text-block">
<h1>WordPress Theme Development</h1>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h3>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-xs-pull-12">
<div class="img-block text-center">
<img src="assets/pics/wordpress.png" alt="WordPress">
</div>
</div>
</div>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-6 col-md-6 col-sm-6 col-md-push-6">
<div class="img-block text-center">
<img src="https://dummyimage.com/500x200/000/fff" alt="WordPress">
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-6 col-md-pull-6">
<div class="text-block">
<h1>WordPress Theme Development</h1>
<h3>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</h3>
</div>
</div>
</div>
I am new both to SO and Boostrap, but I made sure to try a number of previous solutions to my problem and it seems I've created a unique problem for myself as none of the solutions SEEMED to have worked for me. Hopefully I'm not just missing something silly but here's my Bootstrap code:
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<header class="navbar-header">
<a class="navbar-brand" href="#">JMG Photography</a>
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navHeaderCollapse">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</header>
<div class="collapse navbar-collapse navHeaderCollapse">
<ul class="nav navbar-nav navbar-right">
<li class="active">Portfolio
</li>
<!--Home-->
<li>Contact
</li>
</ul>
</div>
</div>
</nav>
<div class="guess">
<p>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
</p>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
Im having trouble getting my page aligned properly. It seems no matter what i do none of the rows align the way i would like them to. either the images are off misaligned from the main img or captions below those images don't line up properly.
I would like the arrows to line up at the same level as the services/faq/contact and the paragraphs below those to be aligned to the left. But it seems i cant achieve this without playing with margins in 10 different places.
http://www.bootply.com/bilUlNXdnE
http://i.imgur.com/vnE3N3U.jpg
Well, this is not just an answer but I just want to guide you through the right direction..
I see you created separate div for Headers, arrows and descriptions. I don't think that is the right way to do it. Rather, you can make one div for columns (including header, image, arrows and description)..
Your Code :
<div class="row " id="icons">
<div class="col-md-4">
<img src="img/bottle.gif" class="image-responsive " id="spray" width="300" alt="" height="240">
</div><!--/#Spray-->
<div class="col-md-4">
<img src="img/vacuum.gif" class="image-responsive " id="vacuum" width="300" alt="" height="240">
</div><!--/#Vacuum-->
<div class="col-md-4">
<img src="img/mop.gif" class="image-responsive " id="mop" alt="" width="300" height="240">
</div><!--/#Mop-->
</div>
<div class="row" id="captions">
<div class="col-md-4">
<h3>Services</h3>
</div>
<div class="col-md-4">
<h3>FAQ</h3>
</div>
<div class="col-md-4">
<h3>Contact</h3>
</div>
</div>
<div class="row" id="arrows">
<div class="col-md-4">
<img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18">
</div>
<div class="col-md-4">
<img src="img/arrow8.gif" class="image-responsive" id="arrow2" alt="" width="18" height="18">
</div>
<div class="col-md-4">
<img src="img/arrow8.gif" class="image-responsive" id="arrow3" alt="" width="18" height="18">
</div>
</div>
<div class="row" id="blurbs">
<div class="col-md-4" id="blurb1">
<div class="services"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
</div><!--/#Spray-->
<div class="col-md-4" id="blurb2">
<div class="FAQ"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
</div><!--/#Vacuum-->
<div class="col-md-4" id="blurb3">
<div class="contact"><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></div>
</div><!--/#Mop-->
</div>
This is a loose coupling between elements that are in same context (e.g. Header, Image, description etc.).
I would recommend you to code something like this -
<div class="col-md-4">
<img src="img/bottle.gif" class="image-responsive " id="spray" width="300" alt="" height="240">
<div class="row">
<div class="col-md-8">
<h3>FAQ</h3>
</div>
<div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18"> </div>
</div>
<div class="services">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
<!--/#Column1-->
<div class="col-md-4">
<img src="img/vacuum.gif" class="image-responsive " id="spray" width="300" alt="" height="240">
<div class="row">
<div class="col-md-8">
<h3>FAQ</h3>
</div>
<div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18"> </div>
</div>
<div class="FAQ">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
<!--/#Column2-->
<div class="col-md-4">
<img src="img/mop.gif" class="image-responsive " id="spray" width="300" alt="" height="240">
<div class="row">
<div class="col-md-8">
<h3>FAQ</h3>
</div>
<div class="col-md-4"><img src="img/arrow8.gif" class="image-responsive" id="arrow1" alt="" width="18" height="18"> </div>
</div>
<div class="contact">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p>
</div>
</div>
<!--/#Column3-->
This way, you don't have to play much with margin and stuff..
Edited example : http://www.bootply.com/ZnylDYHd6x