I'm having an issue with parallax effect on mobile. In fact it seems like that total body size is > 100vh (it also appear the scroll bar o the side). Obv if I change overflow-y from auto to hidden, it fix the problem but it also cut out part of the page. On desktop it doesn't happen. Can anybody help me?
Screenshot:
https://imgur.com/a/n9wMmqN
.selector-for-some-widget {
box-sizing: content-box;
}
header .carousel-item {
height: 100vh;
min-height: 350px;
background: no-repeat center center scroll;
-webkit-background-size: cover;
background-size: cover;
}
body {
margin: 0;
background-color: white;
font-family: 'Open Sans', sans-serif;
min-height: 100%;
}
.wrapper {
height: 100vh;
overflow-y: auto;
overflow-x: hidden;
perspective: 10px;
}
header {
position: relative;
display: flex;
justify-content: center;
align-items: center;
height: calc(100% - 75px);
transform-style: preserve-3d;
z-index: -1;
}
.background {
transform: translateZ(-10px) scale(2.5);
}
.background {
position: absolute;
height: 100%;
width: 100%;
object-fit: cover;
z-index: -1;
}
.title {
font-family: 'Montez', cursive;
color: white;
text-align: center;
}
section {
background-color: white;
}
.navbar {
height: 75px;
font-size: 1.25rem;
letter-spacing: 3px;
font-weight: bold;
}
.navbar-brand {
font-size: 1.75rem;
letter-spacing: 10px;
}
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<!-- Bootstrap Icon CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.8.1/font/bootstrap-icons.css">
<!-- Style CSS -->
<link rel="stylesheet" href="css/styles.css">
<title>Ariano Francesco Photography</title>
</head>
<body>
<div class="wrapper">
<header>
<div id="carouselExampleControls" class="carousel slide background" data-bs-ride="carousel">
<div class="carousel-inner">
<div class="carousel-item active" style="background-image: url('img/carousel_1.jpg')">
</div>
<div class="carousel-item" style="background-image: url('img/carousel_2.jpg')">
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleControls"
data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
<div class="title">
<h1>Ariano Francesco</h1>
<h2>Photography</h2>
</div>
</header>
<section>
<nav class="navbar navbar-expand-lg navbar-light bg-white sticky-top shadow-sm">
<div class="container px-5">
<a class="navbar-brand" href="#">AFR</a>
<button class="navbar-toggler" type="button" data-bs-toggle="offcanvas" data-bs-target="#offcanvasNavbar"
aria-controls="offcanvasNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="offcanvas offcanvas-start" tabindex="-1" id="offcanvasNavbar"
aria-labelledby="offcanvasNavbarLabel">
<div class="offcanvas-header justify-content-end">
<button type="button" class="btn-close text-reset" data-bs-dismiss="offcanvas"
aria-label="Close"></button>
</div>
<div class="offcanvas-body d-flex text-center align-items-center">
<ul class="navbar-nav justify-content-end flex-grow-1">
<li class="nav-item ms-2">
<a class="nav-link active" aria-current="page" href="index.html">Gallery</a>
</li>
<li class="nav-item ms-2">
<a class="nav-link" href="contact.html">Contact</a>
</li>
</ul>
</div>
</div>
</div>
</nav>
<div class="container px-5">
<div class="text-center mt-5">
<h2 class="fw-bold fade-in">Gallery</h2>
</div>
<div class="row mt-5">
<div class="col-lg-4 col-md-12">
<a href="img/_IMG1556.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1556.jpg" class="img-fluid rounded mb-4">
</a>
<a href="img/_IMG1594.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1594.jpg" class="img-fluid rounded mb-4">
</a>
</div>
<div class="col-lg-4">
<a href="img/_IMG1491.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1491.jpg" class="img-fluid rounded mb-4">
</a>
<a href="img/_IMG1558.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1558.jpg" class="img-fluid rounded mb-4">
</a>
</div>
<div class="col-lg-4">
<a href="img/_IMG74c91.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG74c91.jpg" class="img-fluid rounded mb-4">
</a>
<a href="img/_IMG1510.jpg" data-toggle="lightbox" data-gallery="gallery" class="fade-in">
<img src="img/_IMG1510.jpg" class="img-fluid rounded mb-4">
</a>
</div>
</div>
</div>
<footer class="text-center text-muted">
<div class="container px-5">
<div class="mb-4 border-bottom">
<a class="btn btn-floating m-3" href="https://instagram.com/_afr.photo" role="button"><i
class="bi bi-facebook"></i></a>
<a class="btn btn-floating m-3" href="https://www.facebook.com/ArianoFrancescoPH" role="button"><i
class="bi bi-instagram"></i></a>
</div>
<div class="mb-4">
<h6 class="text-uppercase fw-bold mb-4">
Contact
</h6>
<p>
Castagnole delle Lanze, AT
</p>
<p>
franci.ariano#gmail.com
</p>
<p>
339 2350792
</p>
</div>
</div>
<div class="p-4" style="background-color: rgba(0, 0, 0, 0.05);">
© 2022 Copyright:
<a class="text-reset fw-bold" href="www.afr.altervista.org">Ariano Francesco Photography</a>
</div>
</footer>
</section>
</div>
<!-- Bootstrap Bundle with Popper -->
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js"
integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p"
crossorigin="anonymous"></script>
<!-- Lightbox for Bootstrap 5 -->
<script src="https://cdn.jsdelivr.net/npm/bs5-lightbox#1.7.11/dist/index.bundle.min.js"></script>
<!-- Script.js -->
<script src="js/script.js"></script>
</body>
</html>
Look at this answer: https://css-tricks.com/the-trick-to-viewport-units-on-mobile/
// First we get the viewport height and we multiple it by 1% to get a value for a vh unit
let vh = window.innerHeight * 0.01;
// Then we set the value in the --vh custom property to the root of the document
document.documentElement.style.setProperty('--vh', `${vh}px`);
body {
background-color: #333;
}
.module {
height: 100vh; /* Use vh as a fallback for browsers that do not support Custom Properties */
height: calc(var(--vh, 1vh) * 100);
margin: 0 auto;
max-width: 30%;
}
.module__item {
align-items: center;
display: flex;
height: 20%;
justify-content: center;
}
.module__item:nth-child(odd) {
background-color: #fff;
color: #F73859;
}
.module__item:nth-child(even) {
background-color: #F73859;
color: #F1D08A;
}
<div class="module">
<div class="module__item">20%</div>
<div class="module__item">40%</div>
<div class="module__item">60%</div>
<div class="module__item">80%</div>
<div class="module__item">100%</div>
</div>
Fix 100vh Issue on Mobile Devices Using CSS Only
Sometimes, the purpose of using vh unit is to simply create sections equal to the height of the viewport. This is common when you are building landing pages, for instance. In these situations, position sticky won’t help and I want to introduce the fill-available property. It’s easy to use, just remember to use the prefixes and the fall-back value:
.layout {
min-height: 100vh; /* fall-back */
min-height: -moz-available;
min-height: -webkit-fill-available;
min-height: fill-available;
}
Just as simple as that!
Related
Mostly the issue appears on the index page with the toggle not appearing when i resize to smaller than tablet and the altogether the images become non responsive and the captions and buttons in the carousel disappear.
With any other page the responsiveness again stops after a certain width.
ill provide the css as it is because all things that have to do with media tags i tried again and again and at my current level im at the end of my wits.
Thank you in advance!
body {
overflow-x: hidden;
}
/* html, body {
height: 100vh;
height: calc(var(--vh, 1vh) * 100);
} */
#navigation {
min-height: 100vh;
min-width: 100vh;
background-color: #fff;
text-align: center;
}
.navbar-brand {
color: #fff;
font-family: 'Aclonica';
font-style: bold;
font-size: 1.5rem;
}
.nav-link {
color: #000;
font-family: 'Kurale';
font-weight: 600;
font-size: 1.2rem;
}
/* Search Bar */
.topnav input[type=text] {
float: right;
padding: 6px;
border: none;
margin-top: 8px;
margin-right: 16px;
font-size: 17px;
}
/* Carousel */
.carousel-item {
height: 100vh;
min-height: 300px;
background: repeat scroll center scroll;
-webkit-background-size: cover;
background-size: cover;
}
.carousel-item::before {
content: "";
display: block;
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: #000;
opacity: 0.4;
}
.carousel-caption {
bottom: 100px;
padding-left: 100px;
padding-right: 100px
}
.carousel-caption h5 {
font-size: 100px;
font-family: 'Unna';
font-weight: 700;
}
.carousel-caption p {
font-size: 18px;
top: 2rem;
}
.slider-btn {
margin-top: 30px;
}
.slider-btn .btn {
background-color: #ED72AE;
color: #fff;
border-radius: 0;
padding: 0.5rem 0.5rem;
font-size: 1rem;
margin: 2px;
}
/* This maintains the full image but no aspect ratio it appears stretched */
/* .w-100 {
width: 100% !important;
height: 100vh;
} */
/* This works better */
.carousel-inner>.carousel-item>img {
height: 100vh;
}
h3 a h5 {
font-family: 'Unna';
font-weight: 700;
}
.card-title{
font-family: 'Unna';
font-weight: 700;
}
.card-text{
font-family: 'Source Serif Pro';
}
p {
font-family: 'Source Serif Pro';
padding: 3% 10%;
line-height: 1.5rem;
}
.pdrak{
padding-top: 10%;
}
/* About Us */
#about-us {
background-color: #ED72AE;
min-height: 100vh;
min-width: 100vh;
}
.personal {
text-align: center;
padding: 10% 10%;
}
/* Contact */
#contact {
text-align: center;
min-height: 100vh;
min-width: 100vh;
padding: 20% 15%;
}
.social {
padding: 7% 5%;
font-size: 2rem;
}
p {
marging: 20%;
}
/* Products Page */
#home-products {
min-height: 100vh;
min-width: 100vh;
text-align: center;
}
.list {
padding: 9% 15% 5% 15%;
}
.col-lg-3 {
margin: 2% 0 5% 0;
}
.prod {
margin: 2% 0 5% 0;
}
.images {
width: 30%;
}
/* Notebook */
#home-notebooks {
background-color: #EAD4EB;
min-height: 100vh;
min-width: 100vh;
text-align: center;
padding: 7%15%;
}
.dropp{
font-family: 'Unna';
}
.hamb {
position: absolute;
position: fixed;
font-family: 'Aclonica';
font-size:1.5rem;
}
.sidenav {
height: 100%;
width: 0;
position: fixed;
z-index: 1;
top: 0;
left: 0;
background-color: none;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #000;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
color: black;
}
/* Diaries */
#home-diaries {
background-color: #EAD4EB;
min-height: 100vh;
min-width: 100vh;
text-align: center;
padding: 7%15%;
}
/* Contact by mail */
#Contact-by-mail {
background-color: #EAD4EB;
padding-top: 5%;
min-height: 100vh;
min-width: 100vh;
text-align: center;
}
.subm {
text-align: left;
padding-left: 8%;
}
.colo1 {
padding-left: 15%;
}
.logo-resize {
width: 100%;
/* transform: rotate(25deg); */
text-align: center;
}
#media screen and (max-height: 450px) {
.sidenav {
padding-top: 15px;
}
.sidenav a {
font-size: 18px;
}
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<title>Drakollage</title>
<!-- Google Fonts -->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Aclonica&family=Kurale&family=Sail&family=Source+Serif+Pro:wght#400;700&family=Unna:wght#400;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="css/styles.css">
<!-- icons -->
<script src="https://kit.fontawesome.com/6e87f84f27.js" crossorigin="anonymous"></script>
<link rel="icon" href="favicon.ico">
<!-- Bootstrap scrpits -->
<!-- <script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-pprn3073KE6tl6bjs2QrFaJGz5/SUsLqktiwsUTF55Jfv3qYSDhgCecCxMW52nD2" crossorigin="anonymous"></script> -->
</head>
<body>
<section id="navigation">
<nav class="navbar navbar-expand-lg fixed-top">
<div class="container-fluid">
<a class="navbar-brand" href="#navigation">Drakollage</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav ms-auto">
<li class="nav-item">
<a class="nar nav-link active" aria-current="page" href="#navigation">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="products.html">Products</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">Contact</a>
</li>
<li class="nav-item">
<a class="nar1 nav-link" href="#about-us">About</a>
</li>
<input type="text" placeholder="Search..">
<button type="submit"><i class="fa fa-search"></i></button>
</ul>
</div>
</nav>
<!-- Example -->
<div id="carouselExampleCaptions" class="carousel slide" data-bs-ride="false">
<div class="carousel-indicators">
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="0" class="active" aria-current="true" aria-label="Slide 1"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="1" aria-label="Slide 2"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="2" aria-label="Slide 3"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="3" aria-label="Slide 4"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="4" aria-label="Slide 5"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="5" aria-label="Slide 6"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="6" aria-label="Slide 7"></button>
<button type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide-to="7" aria-label="Slide 8"></button>
</div>
<div class="carousel-inner">
<div class="carousel-item active">
<img src="https://thumbs.dreamstime.com/b/santa-claus-red-hat-christmas-fish-carp-isolated-160961341.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Notebooks</h5>
<p>Some representative placeholder content for the first slide.</p>
<div class="slider-btn">
Show Me More
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://thumbs.dreamstime.com/b/santa-claus-red-hat-christmas-fish-carp-isolated-160961341.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Ashtrays</h5>
<p>Some representative placeholder content for the second slide.</p>
<div class="slider-btn">
Show Me More
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://thumbs.dreamstime.com/b/santa-claus-red-hat-christmas-fish-carp-isolated-160961341.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Bookmarks</h5>
<p>Some representative placeholder content for the third slide.</p>
<div class="slider-btn">
Show Me More
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://thumbs.dreamstime.com/b/santa-claus-red-hat-christmas-fish-carp-isolated-160961341.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Boxes</h5>
<p>Some representative placeholder content for the third slide.</p>
<div class="slider-btn">
Show Me More
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://thumbs.dreamstime.com/b/santa-claus-red-hat-christmas-fish-carp-isolated-160961341.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Stickers</h5>
<p>Some representative placeholder content for the third slide.</p>
<div class="slider-btn">
Show Me More
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://thumbs.dreamstime.com/b/santa-claus-red-hat-christmas-fish-carp-isolated-160961341.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Coasters</h5>
<p>Some representative placeholder content for the third slide.</p>
<div class="slider-btn">
Show Me More
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://thumbs.dreamstime.com/b/santa-claus-red-hat-christmas-fish-carp-isolated-160961341.jpg" class="d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Diaries</h5>
<p>Some representative placeholder content for the third slide.</p>
<div class="slider-btn">
Show Me More
</div>
</div>
</div>
<div class="carousel-item">
<img src="https://thumbs.dreamstime.com/b/santa-claus-red-hat-christmas-fish-carp-isolated-160961341.jpg" class="resize d-block w-100" alt="...">
<div class="carousel-caption d-none d-md-block">
<h5>Design it yourself</h5>
<p>Some representative placeholder content for the third slide.</p>
<div class="slider-btn">
Let's Go
</div>
</div>
</div>
</div>
<button class="carousel-control-prev" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="prev">
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
<span class="visually-hidden">Previous</span>
</button>
<button class="carousel-control-next" type="button" data-bs-target="#carouselExampleCaptions" data-bs-slide="next">
<span class="carousel-control-next-icon" aria-hidden="true"></span>
<span class="visually-hidden">Next</span>
</button>
</div>
<!-- Products
Contact
About US -->
<!-- they didnt work -->
<!-- <button type="button" class=" navigation btn btn-dark btn-lg btn-outline-light download-button">About us</button>
<button type="button" class=" navigation btn btn-dark btn-lg btn-outline-light download-button">Contact</button>
<button type="button" class=" navigation btn btn-dark btn-lg btn-outline-light download-button">Products</button> -->
</section>
<section id="about-us">
<div class="row">
<div class=" personal col-lg-6">
<i class=" icons fa-solid fa-circle-check fa-4x"></i>
<h3>Drakollage</h3>
<p class="pdrak">Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
</div>
<div class=" personal col-lg-6">
<i class=" icons fa-solid fa-heart fa-4x"></i>
<h3>The maker</h3>
<p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, </p>
</div>
</div>
</section>
<footer id="contact">
<div class="distance">
<i class="social fa-brands fa-instagram"></i></a>
<i class="social fa-solid fa-envelope"></i>
<p>© Copyright Drakollage</p>
</div>
</footer>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
</body>
</html>
I am trying to position an image to the right of the content area as shown in this dribble shot.
https://dribbble.com/shots/15571736-Money-Transfer-Website
Here is what I have so far.
https://codepen.io/pinapelkod/pen/RwLJJNm
.content {
position: relative;
}
.bg-image {
position: relative;
top: 350px;
left: 450px;
height: 350px;
z-index: 2;
}
When I float the image or position using top and left properties, the layout gets distorted.
By updating the bg-image class style I got the following result. If there is a different problem, specify it more clearly.
body {
background-color: white;
color: #1d2331;
}
.bg-image {
float: right !important;
width: 100%;
position: relative;
height: auto;
margin-right: -40% !important;
}
a.nav-link,
a.navbar-brand {
color: #1d2331;
}
a i {
color: #c9327b;
}
form .btn {
background-color: #1d2331;
color: #f3f1fe;
}
.action-call {
min-height: 35vh;
}
.feature {
background-color: #f3f1fe;
min-height: 56vh;
}
.feature .icon-link {
text-decoration: none;
}
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.2/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<header>
<nav class="navbar navbar-expand-md mt-4">
<div class="container-fluid mx-5">
<a class="navbar-brand" href=""> <i class="bi bi-app-indicator me-2"></i> <strong>Fincy App</strong></a>
<div class="vr ms-0"></div>
<div class="dropdown">
<button class="btn dropdown-toggle" type=" button" id="personalbtn" data-bs-toggle="dropdown"
aria-expanded="false"><strong>Personal</strong></button>
</div>
<ul class="navbar-nav ms-auto">
<li class="nav-item me-4">
<a class="nav-link" href="#"><strong>Download</strong></a>
</li>
<li class="nav-item me-4"><a class="nav-link" href="#"> <strong>Plans</strong></a></li>
<li class="nav-item me-4"><a class="nav-link dropdown-toggle" href="#"> <strong>Product </strong></a>
</li>
</ul>
<form class="ms-5">
<button class="btn btn-outline-success px-5" type="submit">Login</button>
</form>
</div>
</nav>
</header>
<article class="content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
<section class="mx-5 action-call d-flex align-items-center ">
<div class="container-fluid">
<div class="row t-row">
<h1> <strong>Send money <br>abroad more faster</strong></h1>
<div class="sendnow"></div>
</div>
</div>
</section>
<section class="feature d-flex align-items-center">
<div class="container-fluid">
<div class="mx-5 row b-row">
<div class="d-flex justify-content-start">
<div class="col-3 me-3">
<i class="fs-2 bi bi-shield-shaded"></i>
<h5> <strong>Safety guarantee</strong></h5>
<p>We make sure your money will <br>be safe 100% guarantee</p>
<a href="#" class="icon-link"> <strong>Read more</strong><i class="bi bi-chevron-right text-primary"></i>
</a>
</div>
<div class="col-3 me-3">
<i class="fs-2 bi bi-credit-card-2-front-fill"></i>
<h5> <strong>Send money in minutes</strong></h5>
<p>Your money will be sent faster <br>than your blue wallet</p>
<a href="#" class="icon-link"> <strong>Send money now</strong><i
class="bi bi-chevron-right text-primary"></i> </a>
</div>
</div>
</div>
</div>
</section>
</article>
<img style="float: right;" alt="" src="http://example.com/image.png" />
<div style="clear: right">
...text...
</div>
I restructured the html and added a bootstrap display (d-flex) class as shown below.
Update HTML structure:
<div class="d-flex mt-5">
<div class="col-3 ">
.....
</div>
<div class="col-3">
.....
</div>
<div class="col-6 content">
<img class="bg-image" src="https://pinapelkod.github.io/assets/imgs/03_1.svg" alt="">
</div>
</div>
The corresponding CSS:
.content {
position: relative;
}
.bg-image {
position: relative;
top: -310px;
left: 160px;
height: 500px;
}
Link to codepen:
https://codepen.io/pinapelkod/pen/RwLJJNm
I have a horizontal scrollable div where I have squared divs. I need to make these squared divs bigger, but I can't achieve this. In the example I provide here, there are 3 squared divs. Each time I add a new one, all of them get even smaller. How can I prevent them from shrinking and maintain my scrollable div?
Here's my codepen.
Set a min-width to your boxes, and make sure your container doesn't wrap.
Modified code is in the bottom of the CSS snippet
.publish-product-form {
margin-bottom: 15px;
}
.image-scroller {
border: 1px solid blue;
width: 375px;
height: auto;
white-space: nowrap;
position: relative;
overflow-x: scroll;
overflow-y: hidden;
background-color: white;
padding: 0px;
-webkit-overflow-scrolling: touch;
}
.img-box {
padding: 0px;
}
.img-holder {
margin-top: 20px;
}
.image-doesnt-exist {
width: 100%;
padding-bottom: 100%;
background-size: cover;
background-position: center;
border: 2px dotted #8ABE57;
border-radius: 0.25rem;
}
.add-img-button::before {
font-size: 1.2em;
}
.add-img-button {
color: #8ABE57;
position: absolute;
top: 50%;
left: 50%;
font-size: 1.2em;
transform: translate(-50%, -50%);
}
.add-img-button:hover {
color: #9FD362;
}
/**New css**/
.image-scroller .row {
flex-wrap: nowrap;
}
.image-scroller .img-box {
min-width: 180px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/2.4.3/umd/popper.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/5.0.0-alpha1/js/bootstrap.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.1/css/all.min.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" />
<button class="btn btn-primary" type="button" data-toggle="modal" data-target="#editProductModal">Click me</button>
<!-- Modal Editar Aviso -->
<div class="modal fade bd-example-modal-md publish-product-modal" tabindex="-1" role="dialog"
aria-labelledby="myLargeModalLabel" aria-hidden="true" id="editProductModal">
<div class="modal-dialog modal-md modal-dialog-centered" role="document">
<div class="modal-content publish-product-modal-content">
<div class="modal-header publish-product-modal-header">
<img src="images/logo-header.svg">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body publish-product-modal-body text-center col-lg-11 col-md-11 pb-5 pt-0 mx-auto">
<!-- Image Edition Section -->
<div class="publish-product-form col-12">
<form class="edit-ad-product-information">
<!--- MY IMAGE SCROLL TEST -->
<div class="row">
<div class="image-scroller col-12">
<div class="row">
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
<div class="img-box col">
<div class="col-12 img-holder">
<a href="#">
<i class="fas fa-camera add-img-button"></i>
<div class="image-doesnt-exist"></div>
</a>
</div>
</div>
</div>
</div>
</div>
<!-- /MY IMAGE SCROLL TEST-->
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /Modal Editar Aviso-->
remove col class from div.img-box,
also you need to change .row class' display property to block from flex
.row {
display: block;
white-space: nowrap
}
.img-box {
height: 125px;
width: 125px;
display: inline-block;
}
I believe my background img is creating a blank space between it and my flexbox sticky footer. I’ve tried numerous ways, but they just create different problems so far... Can someone help? I created a placeholder image that’s the size of my original background img to recreate the problem for you! Thanks!
JS Fiddle Link
CSS:
.masthead {
height: 100vh;
min-height: 100%;
background:; /* ie 6 cheat */
background-image: url('http://via.placeholder.com/3024x4032?Placeholder%27');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
/* Sticky Footer Classes */
body
{
display: flex;
flex-direction: column;
}
html, body
{
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: 0;
}
This can be solved in multiple ways,
Method 0: I think there is some unwanted text content before the Footer tag. If that text content is intentional then move to Method 2 else do this
Remove this below code snippet which under the <body class="d-flex flex-column">
<div id="page-content">
<div class="container text-center">
<div class="row justify-content-center">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div id="push"></div>
</div>
Method 1: Moving the footer towards the place where the content ends.
#sticky-footer {
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
or Method 2: In the style .css file Move the CSS background-image description defined under the class .masthead to the body
background:; /* ie 6 cheat */
background-image: url('http://via.placeholder.com/3024x4032?Placeholder');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
(use this in body not in .masthead)
This Blank space is your page-content.
You need to add this to your header:
.masthead {
position: absolute;
width: 100%;
margin-top: 56px; // your navbar height
}
Also add this to show your footer:
#sticky-footer {
z-index: 1;
}
If you want to center your content vertically add this classes to your page-content:
<div id="page-content">
<div class="container text-center h-100">
<div class="row justify-content-center align-items-center h-100">
See the snippet:
.masthead {
height: 100vh;
min-height: 100%;
background: ;
/* ie 6 cheat */
background-image: url('http://via.placeholder.com/3024x4032?Placeholder');
background-size: cover;
background-position: center;
background-repeat: no-repeat;
position: absolute;
/* added */
width: 100%;
/* added */
}
/* Sticky Footer Classes */
body {
display: flex;
flex-direction: column;
}
html,
body {
height: 100%;
}
#page-content {
flex: 1 0 auto;
}
#sticky-footer {
flex-shrink: 0;
z-index: 1/* added */
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<nav class="navbar navbar-expand-lg navbar-light bg-light shadow fixed-top">
<div class="container">
<a class="navbar-brand" href="#">website</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-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="#blogs">Blogs</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#events">Events</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#music">Music</a>
</li>
</ul>
</div>
</div>
</nav>
<!--—Full Page Image Header with Vertically Centered Content —-->
<header class="masthead">
<div class="container h-100">
<div class="row h-100 align-items-center">
<div class="col-12 text-center">
<h1 class="font-weight-light">website</h1>
<p class="lead">2nd line</p>
</div>
</div>
</div>
</header>
<div id="page-content">
<div class="container text-center h-100">
<div class="row justify-content-center align-items-center h-100">
<div class="col-md-7">
<h1 class="font-weight-light mt-4 text-white">Sticky Footer using Flexbox</h1>
<p class="lead text-white-50">Use just two Bootstrap 4 utility classes and three custom CSS rules and you will have a flexbox enabled sticky footer for your website!</p>
</div>
</div>
</div>
<div id="push"></div>
</div>
<footer id="sticky-footer" class="py-4 bg-dark text-white-50">
<div class="container text-center">
<small>Copyright © website</small>
</div>
</footer>
My current problem is that rows are overlapping each other when the screen is shrinked (responsive). I've tried adding containers without success. Also, I've noticed that rows are not "pushing" the content below them when in mobile screen sizes... What am I doing wrong here?
Everything looks very well on desktop and tablet, but once I reach mobile screen sizes it gets hairy.
Here's the live code: Codepen - Bootstrap rows overlapping
Here's my current HTML:
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet" />
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" />
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
Any guidence would be helpful!
Change height from vh to %
.v-align{
height:30%;
}
#import url('https://fonts.googleapis.com/css?family=Maven+Pro|Roboto');
body {
background-color: ;
padding-top: 70px;
}
#full-h {
height: 100%;
width: 100%;
}
.txt-wrap {
word-wrap: break-word;
}
.v-align {
height: 30%;
}
.v-align2 {
height: 40%;
}
.fl-row {
background-color: #314d74;
}
.f-row {
margin-top: 6vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.s-row {
background-color: #b3bdc7;
}
.s-row-box {
padding: 5vh;
text-align: center;
}
.t-row {
background-color: #697fa4;
}
h1 {
color: #FFE082;
text-align: center;
margin-top: 2vh;
}
h2 {
border-left: 4px solid #FFB300;
}
.sol-icons {
font-size: 72px;
}
.sol-icons-cap {
width: 300px;
margin-left: auto;
margin-right: auto;
}
.form-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact.s-row-box {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
.contact-ctrl {
display: block;
margin-top: 5vh;
width: 400px;
margin-left: auto;
margin-right: auto;
}
#media (min-width: 576px) {
/* ... */
}
#media (min-width: 768px) {
/* ... */
}
/****** Canvas Animation ******/
/***** Animation CSS Code *****/
.project-title--container,
.project-link--container {
width: 100%;
text-align: center;
}
.project-title,
.project-link {
color: #fff;
font-weight: bold;
text-transform: uppercase;
}
.project-title {
font-size: 18px;
margin-top: 10px;
}
.project-link,
.project-link a {
color: #fff;
font-size: 14px;
margin-top: 10px;
margin-bottom: 10px;
}
.fa {
font-size: 22px !important;
padding: 0 5px;
color: #fff;
}
.container-animation--flexbox {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.animationItem {
position: absolute;
margin-right: 35px;
}
#animationItem-image--bigCloud {
animation: bobble 2s infinite;
margin-top: 3vh;
margin-left: 12vh;
font-size: 170px;
color: #7ec0ee;
}
#animationItem-image--smallCloud {
animation: bobble 4s infinite;
margin-top: 12vh;
margin-left: 20vh;
font-size: 145px;
color: #e9e9e9;
}
.smallCloud-two {
margin-bottom: 5px;
margin-right: 320px;
font-size: 145px;
z-index: -1;
color: #d9d9d9 !important;
animation: bobble 2.5s infinite !important;
}
#keyframes bobble {
0% {
transform: translate3d(0px, -25px, 0px);
animation-timing-function: ease-in;
}
50% {
transform: translate3d(0px, -35px, 0px);
animation-timing-function: ease-out;
}
100% {
transform: translate3d(0px, -25px, 0px);
}
}
<!DOCTYPE html>
<html>
<head>
<title>Network Technology</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, maximum-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script defer src="https://use.fontawesome.com/releases/v5.0.10/js/all.js" integrity="sha384-slN8GvtUJGnv6ca26v8EzVaR9DC58QEwsIk9q1QXdCU8Yu8ck/tL/5szYlBbqmS+" crossorigin="anonymous"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="css/style.css" />
<script src="js/script.js"></script>
</head>
<body>
<div class="container-fluid">
<nav class="navbar navbar-expand-md bg-light navbar-dark fixed-top">
<a class="navbar-brand text-dark" href="#">
<img src="img/logo-gp.png" height="40" width="40" alt="" /> TEST WEB
</a>
<button class="navbar-toggler bg-dark" type="button" data-toggle="collapse" data-target="#collapsibleNavbar">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="collapsibleNavbar">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link text-dark" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Solutions</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">Contact Us</a>
</li>
<li class="nav-item">
<a class="nav-link text-dark" href="#">About Us</a>
</li>
</ul>
</div>
</nav>
<div class="row v-align position-static">
<div class="col-sm-6 col-md-8 fl-row">
<div class="f-row">
<p class="text-center txt-wrap text-light lead">A PARAGRAPH GOES HERE, I WILL FILL IT LATER ON.</p>
</div>
</div>
<div class="col-sm-6 col-md-4 fl-row">
<i id="animationItem-image--bigCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud" class="animationItem material-icons">cloud</i>
<i id="animationItem-image--smallCloud1" class="animationItem material-icons smallCloud-two">cloud</i>
</div>
</div>
<div class="row v-align">
<div class="col-md-4 s-row s-row-box">
<i class="fas fa-box-open fa-10x" style="color:#FFFFFF;"></i>
</div>
<div class="col-md-8 s-row text-center">
<h1> Welcome to WEBSITE</h1>
<p class="text-center txt-wrap text-light lead">ANOTHER PARAGRAPH WITH BRIEFING GOES HERE. WILL FILL IT LATER ON.</p>
<button type="button" class="btn btn-info">Learn About Us</button>
</div>
</div>
<div class="row v-align">
<div class="col-md-12">
<h2> Solutions</h2>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">cloud_done</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">wifi</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">code</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align text-center">
<div class="col-md-4">
<i class="material-icons sol-icons">touch_app</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">security</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
<div class="col-md-4">
<i class="material-icons sol-icons">local_phone</i>
<div class="sol-icons-cap">
<h3>Solutions</h3>
<p>SOLUTION DESCRIPTION GOES HERE.</p>
</div>
</div>
</div>
<div class="row v-align">
<div class="col-12">
Animated background (xterra solution reference)
</div>
</div>
<div class="row v-align2 text-light">
<div class="col-sm-6 t-row">
<h2>| Contact Us</h2>
<form>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput" placeholder="Name">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Email">
</div>
<div class="form-group">
<input type="text" class="form-control form-ctrl" id="formGroupExampleInput2" placeholder="Message">
</div>
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
<div class="col-sm-6 t-row text-light">
<div class="contact-box">
<i class="material-icons">local_phone</i>PHONE NUMBER HERE<br />
<i class="material-icons">email</i>CONTACT EMAIL HERE
</div>
</div>
</div>
<div class="row v-align">
<div class="col-sm-4 fl-row text-light">
Services
</div>
<div class="col-sm-4 fl-row text-light">
Company
</div>
<div class="col-sm-4 fl-row text-light">
Address
</div>
</div>
</div>
</body>
</html>