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>
Related
unfortunately I have a problem moving the image to the edge of the screen.
<section class="hero-main">
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="hero-main__container">
<div class="hero-main__header">
<h1>Lorem ipsum dolor sit amet<br> amet amet amet</h1>
</div>
<div class="hero-main__text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
</div>
</div>
</div>
<div class="col-lg-6">
<img src="images/map-flag.png" style="margin-left: 107px" class="" alt="">
</div>
</div>
</div>
The effect I want to achieve is presented in the screenshot.
Unfortunately, my code does not fit the photo to the edge, if I push it it is not responsive.
May be it will help v2:
<img src="images/map-flag.png" style="max-width: calc(100% - 107px); margin-left:107px; " class="" alt="">
or may be
<section class="hero-main" style="background-image: url('images/map-flag.png'); background-position: 100% 0; background-size: 50%; background-repeat: no-repeat;" >
<div class="container">
<div class="row">
<div class="col-lg-6">
<div class="hero-main__container">
<div class="hero-main__header">
<h1>Lorem ipsum dolor sit amet<br> amet amet amet</h1>
</div>
<div class="hero-main__text">
<p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna.</p>
</div>
</div>
</div>
<div class="col-lg-6">
</div>
</div>
</div>
</section>
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>
I'm using Bootstrap 4 and trying to have columns which are the same height (which I thought Bootstrap did by default).
This is my markup:
<div class="row">
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor sit amet
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor sit amet, consectetur adipiscing
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore Lorem ipsum dolor sit amet, consectetur
</div>
</div>
<div class="col-md-4">
<div class="table-heading">
Lorem ipsum dolor
</div>
<div class="table-text">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
</div>
</div>
</div>
And the result is this:
I'd like the purple headings to align, as well as the columns themselves.
Here is the CSS I'm using:
.table-heading {
text-align: center;
font-weight: bold;
vertical-align: middle;
color:white;
background-color: #7b2265;
padding:10px;
}
.table-text {
padding:10px;
background-color: white !important;
}
Here's a Pen: https://codepen.io/anon/pen/ZxeLpO
Edit:
Since you want both, the titles AND the body text parts to be the same height while also making sure that they are responsive, you can use the re-ordering classes in combination with the h-100 class (height:100%) to achieve the desired effect:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
.table-heading {
text-align: center;
font-weight: bold;
vertical-align: middle;
color:white;
background-color: #7b2265;
padding:10px;
}
</style>
<div class="container bg-light p-3">
<div class="row">
<div class="col-md-4">
<div class="table-heading h-100">
Title1 Lorem ipsum dolor sit amet
</div>
</div>
<div class="col-md-4 order-md-1">
<div class="bg-white h-100 px-3">
Body1 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
<div class="col-md-4">
<div class="table-heading h-100">
Title2 Long, long, veeery long! Lorem ipsum dolor sit amet
</div>
</div>
<div class="col-md-4 order-md-2">
<div class="bg-white h-100 px-3">
Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore. Body2 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore.
</div>
</div>
<div class="col-md-4">
<div class="table-heading h-100">
Title3 Short Lorem
</div>
</div>
<div class="col-md-4 order-md-3">
<div class="bg-white h-100 px-3">
Body3 Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore
</div>
</div>
</div>
</div>
The classes like order-md-1 etc. only kick in on screens that are medium (md) or larger. In this case here, it has the effect of the body part columns being pushed what looks like the next row. While on smaller screens, no re-ordering happens and therefore, on smaller screens, the columns appear in the same order as they are in the HTML.
If you add h-100 as a class to the divs with col-md-4 as a class then it will behave as you expect.
h-100 is the bootstrap4 utility class to set the height to 100%, which will make all the columns have a height equal to the row they all reside in.
<div class="col-md-4 h-100">
...
</div>
Update, you can add height: 100% to the css class .table-text to fill the empty space.
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
I am trying to build a one page website using Foundation with a navbar, 4 background images to separate each of the sections. Using foundation the image resize well but as I am closing down the screen the sections are going further away verticaly revealing the white body background at the bottom of each images.
How I can work this around so that I maintain the proportion of the page from a large browser screen to a smartphone?
Here is an example of Html with the size of each images:
<div id="bg">
<img src="http://placehold.it/1900x1000" alt="">
</div>
<div style="background: white">
<div class="row">
<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</p>
</div>
</div>
<div id="bg1">
<img src="http://placehold.it/1900x900" alt="">
</div>
<div style="background: #2adefe">
<div class="row">
<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</p>
</div>
</div>
<div id="bg2">
<img src="http://placehold.it/1900x650" alt="">
</div>
<div style="background: ##683b17">
<div class="row">
<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</p>
</div>
</div>
<div id="bg3">
<img src="http://placehold.it/1900x700" alt="">
</div>
<div style="background: black">
<div class="row">
</div>
<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</p>
</div>
<div id="bg4">
<img src="http://placehold.it/1900x400" alt="">
</div>
and the type of CSS I use for each background image:
#bg {
display: block;
min-height: 559px;
margin-right: auto;
margin-left: auto;
background-size: 100%;
background-repeat: no-repeat no-repeat;