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
Related
I'm building a new website (with React TypeScript an Tailwind) for my agency, and we have a list of articles (News) which looks like this:
As you can see, we have 3 different sizes of cards to display.
My API request returns "small" / "medium" / "large" in the object of the article to say which kind of card the specific article need.
My question is:
how can I deal this ?
How can I say to my browser to not render with the order of objects received, and to fill the page "properly" ?
By properly, I mean not letting "holes" in the page.
Here is an try with grids :
<div className="col-span-2 bg-white flex items-center justify-center">
<div className="relative w-5/12">
<img src="./assets/images_mock/GoogleMyBusiness.png" alt="" />
<span className="absolute top-2 left-2 rounded-md bg-purple-800 text-white text-xs p-1 uppercase">TEST</span>
</div>
<div className="w-7/12">
<h3 className="font-NexaBlack text-xl">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h3>
<p className="text-gray-800 text-sm mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<button className="rounded-full mt-4 px-4 py-2 border border-gray-300 text-gray-500">
<Link to={'#'}>read article</Link>
</button>
</div>
</div>
<div className="col-span-4 bg-white flex items-center justify-center">
<div className="relative w-1/2">
<img src={RectangleNews} alt="" />
<span className="absolute top-2 left-2 rounded-md bg-purple-800 text-white text-xs p-1 uppercase">TEST</span>
</div>
<div className="w-1/2">
<h3 className="font-NexaBlack text-xl">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h3>
<p className="text-gray-800 text-sm mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<button className="rounded-full mt-4 px-4 py-2 border border-gray-300 text-gray-500">
<Link to={'#'}>read article</Link>
</button>
</div>
</div>
<div className="col-span-2 bg-white flex items-center justify-center">
<div className="relative w-5/12">
<img src="./assets/images_mock/InterkabNews.png" alt="" />
<span className="absolute top-2 left-2 rounded-md bg-teal-500 text-white text-xs p-1 uppercase">Interkab</span>
</div>
<div className="w-7/12">
<h3 className="font-NexaBlack text-xl">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</h3>
<p className="text-gray-800 text-sm mt-2">"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua</p>
<button className="rounded-full mt-4 px-4 py-2 border border-gray-300 text-gray-500">
<Link to={'#'}>read article</Link>
</button>
</div>
</div>
but this code does not re-arrange the divs to fit the width of the screen.
I tried to be as clear as possible.
Hope someone have a solution.
Thank you mates !
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 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 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;