Center text on bottom of the div container - html

Could someone explain me how do I center my text on bottom of the div container?
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
Im trying to get "Learn more about what i do" at the bottom of "welcome-header" row.
CSS :
#welcome-div {
min-height: 100%;
position: relative;
}
.page-scroll {
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: aliceblue;
}
Sorry guys u get me wrong. I want the string to stick to bottom like bottom: 0px;
http://codepen.io/anon/pen/jBLaBX


Add position: relative to #welcome-header then position: absolute; bottom: 0; left: 0; right: 0 to .page-scroll to position the element at the bottom of #welcome-header, and your text-align: center rule will center the text horizontally.
#import url('https://fonts.googleapis.com/css?family=Sansita');
#welcome-header {
width: 100%;
height: 100vh;
background-image: url(img/background.jpg);
position: relative;
}
.welcome-text,
.welcome-text-animation {
font-family: Sansita;
text-align: center;
color: aliceblue;
font-size: 50px;
padding-top: 90px;
}
.home-logo {
display: block;
text-align: center;
}
.home-logo img {
display: inline-block;
padding: 2.5%;
width: 120px;
height: 120px;
margin-left: auto;
margin-right: auto;
display: block;
}
.hire-button {
text-align: center;
padding-top: 90px;
}
.hire-button a {
font-family: Sansita;
text-decoration: none;
color: aliceblue;
font-size: 25px;
border: 2px solid #FDCD3B;
border-radius: 50px;
padding: 1.2%;
transition: all 0.2s linear;
}
.hire-button a:hover {
background-color: #FDCD3B;
color: #2A3A3F;
padding-left: 3%;
padding-right: 3%;
}
#welcome-div {}
.page-scroll {
text-align: center;
position: absolute;
bottom: 0;
left: 0;
right: 0;
}
.page-scroll a {
font-family: Sansita;
text-decoration: none;
font-size: 20px;
color: black;
}
<body>
<div class="container-fluid">
<header id="welcome-header" class="row">
<div id="welcome-div">
<img src="img/logo.png" alt="logo">
<h1 class="welcome-text">
<span>Hi, I'm Robert. I design & build</span>
<br>
<span class="welcome-text-animation"></span>
</h1>
<div class="hire-button">
Yes, I'm available for hire
</div>
<div class="page-scroll ">
<a href="#welcome-div">
Learn more about what i do
<br>
<i class="fa fa-chevron-down"></i>
</a>
</div>
</div>
</header>
<section id="about" class="row">
ABOUT CONTENT
</section>
<section id="skills" class="row">
SKILLS CONTENT
</section>
<section id="portfolio" class="row">
PORTFOLIO CONTENT
</section>
<section id="contact" class="row">
CONTACT CONTENT HERE
</section>
</div>
</body>


.page-scroll {
text-align:center;
}

Related

Why H1 interfering to the navbar in mobile version?

I don't know why my H1 is interfering with navbar in mobile version. When I scroll down my navbar in mobile version, H1 interfering to the navbar and I can't fix this issue. How can I change my code, that it works ?
Image in mobile version is here: https://i.stack.imgur.com/SJ3vi.jpg
Code below:
.banner {
background-image: url('../../../assets/images/natallia-nagorniak-tA3sJ4u09eU-unsplash.jpg');
height: 800px;
background-position: center center;
background-size: 100%;
}
.content {
top: 25%;
left: 5%;
position: absolute;
}
.content h1 {
color: black;
font-size: 3em;
font-weight: bold;
}
.content a {
text-decoration: none;
background-color: var(--primary-color);
color: #fff;
padding: 15px 40px;
border-radius: 5px;
}
.content a:hover {
background-color: #64cff7;
color: #fff;
}
.stepBox {
background-color: #64cff7;
padding: 20px 20px;
border-radius: 5px;
text-align: center;
}
.stepBox h1 {
font-size: 30px;
font-weight: bold;
color: black;
}
.stepBox p {
font-size: 20px;
font-style: italic;
color: #fff;
}
.highlight {
color: var(--primary-color);
font-weight: bold;
font-style: italic;
text-decoration: underline;
}
.cakebox {
padding: 10px 5px;
}
.cakebox img {
width: 100%;
height: 250px;
object-fit: cover;
border-radius: 5px;
}
.cakebox h1 {
font-size: 18px;
margin-top: 20px;
font-weight: bold;
}
.viewmorebtn {
text-decoration: none;
background-color: #64cff7;
color: #fff;
padding: 10px 10px;
border-radius: 5px;
font-size: 18px;
}
.viewmorebtn i {
padding-left: 5px;
}
#media screen and (max-width:600px) {
.banner {
height: 600px;
}
}
<div class="banner">
<div class="content">
<h1 class="mb-5">Čerstvé koláče <br/> priamo k tvojim dverám</h1>
<a routerLink="menu">Objednaj teraz! <i class="bi bi-arrow-right"></i></a>
</div>
</div>
<!-- step -->
<div class="container mt-5 mb-5">
<h1 class="text-center">Ako získať <span class="highlight">čerstvé koláče</span></h1>
<div class="row mt-3">
<!-- one -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>1</h1>
<p>vyberte koláč</p>
</div>
</div>
<!-- two -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>2</h1>
<p>vyplnte podrobnosti</p>
</div>
</div>
<!-- three -->
<div class="col-lg-4 mt-2">
<div class="stepBox">
<h1>3</h1>
<p>doručenie vašej objednávky</p>
</div>
</div>
</div>
</div>
<!-- cakebox -->
<div class="container mt-4 mb-4">
<h1 class="text-center">Obľúbené produkty</h1>
<div class="row">
<div class="col-lg-3 mt-3" *ngFor="let ck of cakeData; index as i">
<div class="cakebox" *ngIf="i<=3">
<img src="{{ck.cakeImg}}" />
<h1>{{ck.cakeName}}</h1>
<p>{{ck.cakePrice | currency:'EUR'}}</p>
</div>
</div>
</div>
<a routerLink="menu" class="viewmorebtn">Zobraziť viac<i class="bi bi-arrow-right"></i></a>
</div>
Thank you for your answers!

.content {
top: 25%;
left: 5%;
position: absolute;
}
The container of the h1 is positioned absolutely. The default z-index is causing it to overlap other elements which have a smaller z-index value.
Setting the z-index of the .content div and navbar may help to solve the problem.
.content {
top: 25%;
left: 5%;
position: absolute;
z-index: 10; /** something smaller than the z-index of the navbar **/
}
.navbar {
...
z-index: 20; /** something bigger than the z-index of .content **/
}

Multiple Images in an input box (Google Searchbar)

I am fairly new to coding. I am working on recreating the Google home page for The Odin Project and I cannot seem to get the images to sit right in the search bar.
Thus far all of my code and formatting has been done in HTML. I was struggling how to do CSS and push it via Git. anyway...
I got the magnifying glass to sit in the proper spot, but when I went to add the microphone image, it overlaps the magnifying glass. The code is as follows:
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>
I tried changing the class, giving it an id, setting the position to relative and margin right as auto, but i cannot seem to get it to move over to the right side of the search bar.
Additionally, the buttons below the search bar are stuck together. I had each button as its own, but the moment I added them to the same div they have become ajoined and when I try to separate them, the only way i can get them on them aligned is by styling them to the same row. Margin does not help split them apart, I even tried to get them in separate columns no dice. I am really frustrated as i made it pretty far in a day just using HTML. I would like to keep it HTML until I learn how to push CSS to GitHub via Git.
Thank you in advance!!!

You've set the fake-input to position: relative and the image to position: absolute which is already correct, but for the img#mic you need to set it's position right and not left to make it appear in the right side of the fake-input, so I add some style like this
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
And for the button, it's working if you add the margin for the button like in the updated snippet below
<!DOCTYPE html>
<html lang="en">
<style>
<!--FONTS-->
#import url('https://fonts.googleapis.com/css2?family=Manrope&display=swap');
body{
overflow-x: hidden !important;
max-width: 90%;
}
.center {
display: block;
margin-left: auto;
margin-right: auto;
width: 350px;
}
button {
width: 127px;
height: 36px;
text-align: center;
border: none;
background-color: #f2f2f2;
border-radius: 5px;
font-size: 13px;
color: #777;
font-family: 'Manrope', sans-serif;
margin: 10px;
}
input {
border-width: 3px;
border-color: #f2f2f2;
display: block;
margin-left: auto;
margin-right: auto;
width: 400px;
height: 37px;
text-align: center;
font-size: 20px;
border-radius: 50px;
border-style: solid;
font-family: 'Manrope', sans-serif;
}
.btn-toolbar {
display: flex;
flex-direction: row;
justify-content: center;
}
.btn-toolbar button:hover {
background-color: #88888888;
}
ul {
background-color: #f2f2f2;
float: left;
width: 100%;
display: inline-block;
}
a {
color: #777;
display: inline-block;
font-size: 15px;
text-decoration: none;
}
a:hover {
color: green;
}
.column {
float: left;
}
.footer{
position:absolute;
bottom: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
.header{
position:absolute;
top: 0;
width: 100%;
font-family: 'Manrope', sans-serif;
}
h1{
display: flex;
justify-content: center;
align-items: center;
}
.fake-input{
position: relative;
width: 350px;
margin-left: auto;
margin-right: auto;
margin-top: auto;
margin-bottom: auto;
}
.fake-input input{
background-color: #fff;
display: block;
width:100%;
box-sizing: border-box;
}
.fake-input img{
position: absolute;
top: 11px;
left: 10px;
}
.fake-input img#mic{
position: absolute;
left: unset;
right: 10px;
}
</style>
<div class="row">
<header id="header" class="header">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">About</a>
<a class="column" href="https://www.google.com">Store</a>
<a class="column" href="https://www.google.com">images</a>
<a class="column" href="https://www.google.com">gmail</a>
<a class="column" href="https://www.google.com">squares</a>
<a class="column" href="https://www.google.com">circle</a>
</li>
</ul>
</header>
<body>
</div>
<!-- Google Logo -->
<div>
<h1><img style="padding-bottom: 20px; padding-top: 60px;" class="center" id="google-image" src="https://www.google.com/images/branding/googlelogo/1x/googlelogo_color_272x92dp.png">
</h1>
</div>
<div>
<!--Google search bar -->
<!-- Search input text -->
<div class="fake-input">
<input type="text" placeholder="Search Google or type URL" />
<img id="msgnify" src="https://cdn.pixabay.com/photo/2017/01/13/01/22/magnifying-glass-1976105_1280.png" width=15 />
<img id="mic" src="https://upload.wikimedia.org/wikipedia/commons/thumb/e/e8/Google_mic.svg/833px-Google_mic.svg.png" width=15>
</div>
<br>
<!-- Search Buttons -->
<div style="padding-top: 20px;" class="btn-toolbar">
<button>Google Search</button>
<button>I'm Feeling Lucky</button>
</div>
</div>
<br>
</body>
<!-- footer contains link to the respective locations -->
<div class="row">
<footer id="footer" class="footer">
<ul style="list-style-type:none;">
<li>
<a class="column" href="https://www.google.com">Advertising</a>
<a class="column" href="https://www.google.com">Business</a>
<a class="column" href="https://www.google.com">How Search Works</a>
<a class="column" href="https://www.google.com">Privacy</a>
<a class="column" href="https://www.google.com">Terms</a>
<a class="column" href="https://www.google.com">Settings</a>
</li>
</ul>
</footer>
</div>
</html>

you should give position :relative to class (fake-input);
then give position :absolute to (search.png or mic.

How to center cards and remove scroll bar?

I have added 9 cards to the website I'm making and I'm having two issues.
(1) How do I center the 9 cards? As it is more to the left and not centered to the screen.
(2) How do I remove the scroll bar? It seems like the spacing between the top and bottom cards and also below the bottom cards is a lot therefore its moving down and has a scroll bar.
Website Image
<!DOCTYPE html>
<html>
<head>
<title>Discover | Sweeties</title>
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
<style>
.navigation{
padding-top:30px;
padding-bottom:30px;
position:absolute;
top:0;
width:100%;
z-index:1001;
}
.navbar-right{
float:right;
padding-right:10%;
}
.navbar-right a{
text-decoration:none;
padding:10px;
color: #FFFFFF;
font-family:Calibri;
font-weight:900;
font-size: 25px;
}
.navbar-right a:hover{
text-decoration:underline;
}
.navbar-logo{
padding-left:10%;
font-family:Calibri;
font-size:30px;
font-weight:bold;
text-decoration:none;
color:#FFFFFF;
}
.video-container {
z-index: -100;
width:100%;
height:75%;
overflow:hidden;
position:absolute;
top:0;
left:0;
}
#video-bg{
width:100%;
}
.portfolio-section{
margin-top:50%;
}
.tagline-left{
float:left;
width:50%;
text-align:center;
}
.tagline-right{
float:right;
width:50%;
text-align:center;
}
.tagline-video{
width:75%;
}
.tagline-right-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:17%;
font-family:Calibri;
color:#FFFFFF;
width:290px;
font-size:40px;
}
.tagline-left-text{
position:absolute;
margin-top:9%;
text-align:center;
margin-left:11%;
font-family:Calibri;
color:#fff;
width:375px;
font-size:40px;
}
</style>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0,0,0,0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
</style>
</head>
<body>
<div class="background-wrap">
<video id="video-bg-elem" preload="auto" autoplay="true" loop="loop" muted="muted">
<source src="Videos/beach1.mp4" type="video/mp4">
</video>
</div>
</body>
<style type="text/css">
*{
margin: 0px;
padding: 0px;
}
body{
font-family: Calibri;
}
.main{
margin: 3%;
}
.card{
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img{
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title{
text-align: center;
padding: 20px;
}
h1{
font-size: 40px;
}
h2{
font-size: 22px;
}
.des{
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button{
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding:10px;
}
button:hover{
background-color: black;
color: white;
transition: .5s;
cursor: pointer;
}
{
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
box-sizing: border-box;
margin: 0;
padding: 0;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.20);
}
.card:hover img {
transform: scale(1);
}
</style>
<body>
<div class="main">
<div class="card">
<div class="image">
<img src="Images/rakiraki.jpg">
</div>
<div class="title">
<h1>
Rakiraki</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Lautoka.jpg">
</div>
<div class="title">
<h1>
Lautoka</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/nadi.jpg">
</div>
<div class="title">
<h1>
Nadi </h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/sigatoka.jpg">
</div>
<div class="title">
<h1>
Sigatoka</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2 >
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/ph.jpg">
</div>
<div class="title">
<h1>
Pacific Harbour</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/suva.jpg">
</div>
<div class="title">
<h1>
Suva</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/Labasa.jpg">
</div>
<div class="title">
<h1>
Labasa</h1>
</div>
<div class="des">
<h2> KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
<div class="card">
<div class="image">
<img src="Images/savusavu.jpg">
</div>
<div class="title">
<h1>
Savusavu</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">Read More...</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>

The best approach that I would suggest is flex.
I have added some custom style to yoy existing code just to make it fine in flex.
Here is my additional css added.
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
Your working fiddle.
.navigation {
padding-top: 30px;
padding-bottom: 30px;
/* position: absolute;
top: 0; */
width: 100%;
z-index: 1001;
}
.navbar-right {
float: right;
padding-right: 10%;
}
.navbar-right a {
text-decoration: none;
padding: 10px;
color: #ffffff;
font-family: Calibri;
font-weight: 900;
font-size: 25px;
}
.navbar-right a:hover {
text-decoration: underline;
}
.navbar-logo {
padding-left: 10%;
font-family: Calibri;
font-size: 30px;
font-weight: bold;
text-decoration: none;
color: #ffffff;
}
#video-bg {
width: 100%;
}
.portfolio-section {
margin-top: 50%;
}
.tagline-left {
float: left;
width: 50%;
text-align: center;
}
.tagline-right {
float: right;
width: 50%;
text-align: center;
}
.tagline-video {
width: 75%;
}
* {
margin: 0;
padding: 0;
}
body {
font-family: Calibri, sans-serif;
}
.background-wrap {
position: fixed;
z-index: -1001;
width: 100%;
height: 100%;
overflow: hidden;
top: 0;
left: 0;
}
#video-bg-elem {
position: absolute;
top: 0;
left: 0;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
width: 100%;
min-height: 100%;
z-index: 1000;
background-color: rgba(0, 0, 0, 0.7);
}
.content h1 {
text-align: center;
font-size: 100px;
text-transform: uppercase;
font-weight: 300;
color: #fff;
padding-top: 15%;
margin-bottom: 10px;
}
.content p {
text-align: center;
font-size: 50px;
letter-spacing: 3px;
color: #aaa;
}
* {
margin: 0px;
padding: 0px;
}
body {
font-family: Calibri;
}
.main {
/* Commented */
/* margin: 3%; */
}
.card {
width: 20%;
background-color: white;
display: inline-block;
box-shadow: 2px 2px 20px black;
border-radius: 25px;
margin: 2%;
}
.image img {
width: 100%;
border-top-right-radius: 25px;
border-top-left-radius: 25px;
}
.title {
text-align: center;
padding: 20px;
}
h1 {
font-size: 40px;
}
h2 {
font-size: 22px;
}
.des {
padding: 3px;
text-align: center;
padding-top: 5px;
border-bottom-right-radius: 5px;
border-bottom-left-radius: 5px;
}
button {
margin-top: 40px;
margin-bottom: 10px;
background-color: white;
border: 1px solid black;
border-radius: 100px;
padding: 10px;
}
button:hover {
background-color: black;
color: white;
transition: 0.5s;
cursor: pointer;
}
.card {
position: relative;
overflow: hidden;
}
.card img {
max-width: 100%;
transition: all 0.3s;
display: block;
width: 100%;
height: auto;
transform: scale(1.2);
}
.card:hover img {
transform: scale(1);
}
/* Custom styles */
.main {
display: flex;
flex-wrap: wrap;
justify-content: center;
width: 100%;
}
.card {
display: flex;
flex-direction: column;
}
.des {
flex-grow: 1;
justify-content: space-between;
display: flex;
flex-direction: column;
}
body {
background: cadetblue;
}
<header>
<div class="header">
<nav class="navigation">
Sweeties | Popular Destinations
<div class="navbar-right">
Home
Discover
About Us
Contact
About Developer
</div>
</nav>
</div>
</header>
<div class="background-wrap">
<video
id="video-bg-elem"
preload="auto"
autoplay="true"
loop="loop"
muted="muted"
>
<source src="https://youtu.be/ujKVJcwbpRo" type="video/mp4" />
</video>
</div>
<div class="main">
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Rakiraki
</h1>
</div>
<div class="des">
<h2>Dive Wananavu</h2>
<button
onclick="document.location='https://www.tripadvisor.com/Attraction_Review-g297568-d3850463-Reviews-Dive_Wananavu-Rakiraki_Viti_Levu.html'"
>
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Lautoka
</h1>
</div>
<div class="des">
<h2>Koroyanitu National Heritage Park</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Nadi
</h1>
</div>
<div class="des">
<h2>Denarau Island</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Sigatoka
</h1>
</div>
<div class="des">
<h2>Sand Dunes</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Pacific Harbour
</h1>
</div>
<div class="des">
<h2>Arts Village</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Suva
</h1>
</div>
<div class="des">
<h2>Museum</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Labasa
</h1>
</div>
<div class="des">
<h2>KokoMana Vuadomo Waterfall</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
<div class="card">
<div class="image">
<img
src="https://upload.wikimedia.org/wikipedia/commons/thumb/c/c9/RakiRaki_ramens_-_1.jpg/800px-RakiRaki_ramens_-_1.jpg"
/>
</div>
<div class="title">
<h1>
Savusavu
</h1>
</div>
<div class="des">
<h2>KokoMana Coco Farm</h2>
<button onclick="document.location='default.asp'">
Read More...
</button>
</div>
</div>
</div>

Hover effects on webpage overide dropdown navigation bar

I have a webpage that uses purely html and CSS (no JavaScript yet). The webpage contains a simple, fixed position header with hover dropdowns for each category. The webpage content itself is arranged in 'tiles' that produce effects on hover to emphasize them (and link to other pages). I will attach an image to better explain. The dropdown works fine when at the very top of the webpage, however if the dropdown menu falls on top of one of the tiles the dropdown will disappear and trigger the tile hover effects instead.
I have ensured that all parts of the dropdown have a z-index greater than the tiles.
Dropdown HTML:
<nav class="navigation">
<ul>
<li class=dropdown>
catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
</ul>
</nav>
Page content HTML (example for single tile, code repeated):
<a href="content6.html" class="tile">
<img src="image1.jpg>
<div class="container">
<div class="overlay"></div> /* overlay that animates on hover */
/* content for the tile */
</div>
</a>
relevant CSS:
navigation {
position: fixed;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
z-index: 20;
}
.dropdown-content {
display: none;
position: absolute;
}
.dropdown-content a {
display: inline-block;
position: relative;
}
.dropdown-content a:hover {
background-color: blue;
color: white;
}
.dropdown:hover .dropdown-content{
display: block;
}
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: .5s ease;
z-index: 17;
}
.tile:hover .overlay {
opacity: 0.1;
}
Image 1:
Top of page(Works Fine)
Image 2:
Scrolled down(Hovering over Content 3 will close dropdown)
I would like for the dropdown menu to stay on top of tiles regardless of whether or not the hover effects are triggered. I'm not sure if this will require JavaScript. Any help is appreciated!
Edit: Snippet Added
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

This problem can be solved by changing the z-index of headerto 20. Even though the z-index of the .dropdownclass was 20, the z-index of the header element was 10.
Although the z-index is not inherited, one needs to take into consideration the stacking context. For example, if a sibling element B has a z-index that is greater than the z-index of sibling element A, B will be above A. If Ahas a child element that has a z-index higher than that of element B, B will still be shown above A provided that B has a greater z-index than A.
For more information about stacking contexts, check out this Post.
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
a:not(p):hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 20;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
z-index:20;
position: fixed;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.content1{
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<!DOCTYPE html >
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

Your hover effect is only applied to a, which means it loses the effect when mouse is not over the actual link.
Apply the hover to li instead, so it will cover it properly.
a:not(p):hover {
color: #38b6ff;
}
use this instead.
li:hover {
color: #38b6ff;
}
/* General Rules */
* {
margin: 0;
padding: 0;
border: none;
font-family: "DM Serif Text", serif;
}
body {
background-color: #1b1d35;
color: whitesmoke;
max-width: 100%;
overflow-x: hidden;
margin: 0 auto;
}
ul {
margin: inherit;
padding: none;
border: none;
list-style: none;
text-align: center;
}
li {
margin: inherit;
padding: none;
border: none;
}
a {
color: whitesmoke;
font-size: 2rem;
display: inline-block;
width: auto;
height: auto;
text-decoration: none;
margin: 0 auto;
transition-duration: 0.3s;
}
li:hover {
color: #38b6ff;
}
header {
position: fixed;
z-index: 10;
background-color: #7e7d7d;
width: 100%;
height: 10rem;
margin: inherit;
padding: none;
border: none;
}
#head-logo {
position: absolute;
width: 15%;
height: auto;
}
.navigation {
position: fixed;
z-index: 20;
width: 100%;
margin: 0 auto;
border: none;
padding: none;
top: 5rem;
}
.navigation li {
display: inline-block;
margin: 0 5%;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #7e7d7d;
box-shadow: 0 1rem 2rem 0 rgba(0,0,0,0.2);
}
.dropdown-content a {
font-size: 1.5rem;
color: whitesmoke;
text-decoration: none;
text-align: left;
display: inline-block;
width: 17.5rem;
}
.dropdown-content a:hover {background-color: #7e7d7dd8; box-shadow: 1rem rgb(0,0,0); color: rgb(56, 182, 255);}
.dropdown:hover .dropdown-content{display: block;}
.sidebar {
position: fixed;
top: 17rem;
margin-left: 0.1%;
text-align: left;
}
.sidebaritem{
font-size: 1rem;
margin-top: 1rem;
margin-left: 0;
text-align: left;
}
h3 {
font-size: 1.5rem;
margin: 1rem auto;
}
#main {
position: relative;
top: 12rem;
width: 65%;
margin: inherit;
}
img {
width: 100%;
height: auto;
}
.row {
height: 20rem;
}
.column {
float: left;
width: 31%;
padding: 1%;
position: relative;
}
#bigtile {
width: 64%;
padding: 1%;
}
.container {
position: relative;
}
/* Things that apply to all tiles */
.overlay {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
height: 100%;
width: 100%;
opacity: 0;
transition: 0.5s ease;
background-color: #38b6ff;
z-index: 17;
}
/* Style for tiles where pictures take up full tile */
.pic-tile {
border-top: 5px solid #38b6ff;
}
.pic-tile .container img {
height:100%;
width:100%;
}
.pic-tile .container h2{
position: absolute;
left: 2%;
bottom: 2rem;
z-index: 7;
}
.pic-tile .container h3 {
position: absolute;
left: 2%;
bottom: 0;
z-index: 7;
}
.pic-tile:hover .overlay {
opacity: 0.1;
}
/* Style for regular tiles */
.tile img {
height: 50%;
width: 100%;
top: 0;
}
.tile {
background-color: gray;
bottom: 1%;
text-align: end;
position: relative;
width: 100%;
height: 100%;
border-top: 5px solid #38b6ff;
}
.tile .container{
font-size: 1rem;
position: relative;
margin-bottom: 1%;
margin-left: 1%;
}
.tile .container p{
font-size: 1rem;
position: relative;
text-align: end;
color: whitesmoke;
}
.tile:hover .overlay {
opacity: 0.1;
}
<html>
<body>
<!-- <img> insert logo here -->
<header>
<nav class="navigation">
<ul>
<li class=dropdown>
Catagory1
<div class="dropdown-content">
content1
content2
content3
</div>
</li>
<li class="dropdown">
Catagory2
<div class="dropdown-content">
content4
content5
</div>
</li>
<li>Catagory3</li>
</ul>
</nav>
</header>
<div id="main">
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
<div class="row">
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
<div class="column">
<a href="cont8.html" class="tile">
<div class="overlay"></div>
<img class="image" src="img.png">
<div class="container">
<h2>Hello World</h2>
</div>
</a>
</div>
</div>
</div>
</div>
</body>
</html>

Working with rows and columns boostrap

So, I'm trying to make this boxes that will hold some text and maybe some img brackground, but boxes won't align like they should on a small screen.
I tried a few things, but text won't align on the botton without destroying the alignment
CSS:
.bigbox {
text-align: center;
padding: 80px 40px;
}
.bigbox .bigbox-title {
text-align: left;
font-size: 28px;
color: #fff;
}
.bigbox .bigbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
.smallbox {
text-align: center;
padding: 80px 40px;
}
.smallbox.smallbox-title {
text-align: left;
font-size: 28px;
color: #fff;
}
.smallbox.smallbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
HTML
<div class="full-width-container">
<div class="row no-space-row ">
<div class="col-sm-6 bg-color-base">
<div class="bigbox ">
<h2 class="bigbox-title">BOX 1</h2>
<p class="bigbox-text">DESCRIPTION</p>
</div>
</div>
<div class="col-sm-6">
<div class="smallbox bg-color-purple ">
<h2 class="smallbox-title">BOX 1</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
<div class="smallbox bg-color-purple-dark ">
<h2 class="smallbox-title">BOX 1</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
</div>
</div>
</div>

The key in this is display:flex on the parent div. This is forcing the two child divs to be the same height.
I have removed the padding from the second div to move it closer to the big box, then position:absoluted the big box title to the bottom of the div.
I've also played with the padding a bit to help with styling - but haven't got it styled to look just like the image above.
.row {
display:flex;
}
.bg-color-base {
background:red;
}
.bg-color-base + div{
padding:0;
}
.bg-color-purple {
background:purple;
}
.bg-color-purple-dark {
background:blue;
}
.bigbox {
text-align: center;
padding: 40px;
position:absolute;
bottom:0;
}
.bigbox .bigbox-title {
align-self: flex-end;
text-align: left;
font-size: 28px;
color: #fff;
}
.bigbox .bigbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
.smallbox {
text-align: center;
padding: 160px 40px 10px;
}
.smallbox.smallbox-title {
text-align: left;
font-size: 28px;
color: #fff;
}
.smallbox.smallbox-text {
text-align: left;
font-size: 18px;
color: #fff;
opacity: .85;
margin-bottom: 20px;
}
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet"/>
<div class="full-width-container">
<div class="row no-space-row ">
<div class="col-xs-6 bg-color-base">
<div class="bigbox ">
<h2 class="bigbox-title">BOX 1</h2>
<p class="bigbox-text">DESCRIPTION</p>
</div>
</div>
<div class="col-xs-6">
<div class="smallbox bg-color-purple ">
<h2 class="smallbox-title">BOX 2</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
<div class="smallbox bg-color-purple-dark ">
<h2 class="smallbox-title">BOX 3</h2>
<p class="smallbox-text">DESCRIPTION</p>
</div>
</div>
</div>
</div>

Here you go. The text has to be in an absolutely positioned div.
http://codepen.io/ruchiccio/pen/Kzbeqa
.bcenter {
position: absolute;
bottom: 0;
left: 0;
right: 0;
margin-right: auto;
margin-left: auto;
width: 100%;
text-align:center;
}