some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar {
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger {
display: none;
}
.navbar .menu ul {
display: flex;
}
.navbar .menu ul li a {
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a {
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active {
background: #5db485;
}
.container {
margin-top: 150px;
width: 1906px;
height: 397px;
}
.promo {
width: 1906px;
}
/* Safari Tours*/
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
;
width: 1906px;
}
.safari-title {
text-align: center;
padding-top: 30px;
font-size: 50px;
}
.banner {
display: flex;
justify-content: center;
}
.safari {
margin: 2%;
}
.safari img {
width: 500px;
}
/*Tablet*/
#media (max-width: 992px) {
.navbar {
height: 218px;
padding: 12px;
}
.navbar .inner_navbar {
flex-direction: column;
}
.container {
margin-top: 218px;
}
}
/*Mobile*/
#media (max-width: 728px) {
.navbar {
height: 150px;
}
.navbar .inner_navbar {
flex-direction: row;
}
.navbar .menu ul {
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li {
padding: 10px;
}
.navbar .menu ul li a {
width: 100%;
padding: 12px;
}
.navbar .hamburger {
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu {
display: none;
}
.navbar .menu.activate {
display: block;
}
.container {
margin-top: 150px;
width: 690px;
height: 144px;
}
.promo {
width: 690px;
}
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
width: 690px;
}
.safari {
margin: 1%;
}
.safari img {
width: 300px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</header>
<section>
<div class="safari-tours">
<h1 class="safari-title">SAFARI TOURS</h1>
<div class="banner">
<div class="safari">
<img src="https://i.imgur.com/9QH8NFE.jpeg" alt="Morning Safari" />
</a>
</div>
<div class="safari">
<a href="https://bigdunestours.com/desert-safari" target="_top">
<img src="https://i.imgur.com/2E9ytwc.jpeg" alt="Evening Safari" />
</a>
</div>
</div>
</div>
</section>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function() {
menu.classList.toggle("activate");
})
</script>
</body>
</html>
some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
edited i did try as one of the comment mention but still no luckk the results are something like this
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar{
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger{
display: none;
}
.navbar .menu ul{
display: flex;
}
.navbar .menu ul li a{
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a{
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active{
background: #5db485;
}
.container{
width: 100%;
max-width: 1906;
}
/*Tablet*/
#media (max-width: 992px){
.navbar{
height: 218px;
padding: 12px;
}
.navbar .inner_navbar{
flex-direction: column;
}
.container {
max-width: 991.98px;
}
}
/*Mobile*/
#media (max-width: 728px){
.navbar{
height: 150px;
}
.navbar .inner_navbar{
flex-direction: row;
}
.navbar .menu ul{
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li{
padding: 10px;
}
.navbar .menu ul li a{
width: 100%;
padding: 12px;
}
.navbar .hamburger{
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu{
display: none;
}
.navbar .menu.activate{
display: block;
}
.container{
max-width: 727.98px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</div>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function(){
menu.classList.toggle("activate");
})
</script>
</body>
</html>
Use 100% width and set a max-width for each #media.
Important: use % in your main layout, not absolute pixels.
By using this the content will not overflow the .container
.container {
width: 100%;
max-width: 1906px;
}
#media (max-width: 992px) {
.container {
/* width 100% is set aboven*/
max-width: 991.98px;
}
}
#media (max-width: 728px) {
.container {
/* width 100% is set aboven*/
max-width: 727.98px;
}
}
Related
I was just creating website with html and CSS with a responsive navigation bar and hamburger menu
and which has some content as well in the body of page
but after including contents inside the page the hamburger menu isn't showing
its transition are only you can see
i just wanted the hamburger menu to be shown without disturbing the contents of this page
code
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
Simply add a z-index: 9999; to your nav ul and will see that.
It is hidden probably because it is out of the overflow of the parent block.
Try to add a background-color: #2f2f42; to your ul and job should be done.
DEMO
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body {
background-color: #2f2f42;
}
nav {
display: flex;
height: 90px;
width: 100%;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
}
nav .logo {
font-size: 20px;
font-weight: bold;
color: teal;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: rgb(92, 156, 92);
text-decoration: none;
font-size: 18px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: teal;
background-color: white;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked~.menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
z-index: 9999; /** ADDED **/
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
background-color: #2f2f42; /** ADDED **/
}
#click:checked~ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked~ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: teal;
}
}
.content {
position: relative;
background-color: #131314;
color: whitesmoke;
border: 5px solid grey;
border-radius: 12px;
width: auto;
height: 50rem;
margin-top: 1vw;
margin-left: 4vw;
margin-right: 4vw;
font-weight: bolder;
}
#media (max-width: 920px) {
.content {
display: block;
}
}
#media (max-width: 920px) {
.content #bor,
.det,
.clk {
display: block;
}
}
.bor {
justify-content: center;
text-align: center;
border-bottom: 0.7vw solid white;
}
.det {
display: inline-block;
margin-left: 1vw;
text-align: left;
border-bottom: 0.6vw solid whitesmoke;
}
.clk {
float: right;
width: fit-content;
height: fit-content;
margin-right: 1vw;
}
h2 {
box-sizing: border-box;
padding: 0.6vw;
margin: 0.8vw 0.8vw 0.8vw 0.8vw;
background-color: rgb(64, 80, 113);
text-align: left
}
#exp {
padding: 0.8vw;
margin: 0.8vw 0.8vw 0.8vw 1.9vw;
text-align: left;
}
footer {
background-color: rgb(104, 99, 25);
color: black;
margin: 15px;
padding: 15px;
border-radius: 8px;
}
#foo {
text-align: center;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.2.0/css/all.min.css" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Navigation Menu</title>
</head>
<body>
<nav>
<div class="logo">Logo img</div>
<input type="checkbox" id="click">
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="#">Home</a></li>
<li>Services</li>
<li>About</li>
</ul>
</nav>
<div class="content">
<p class="bor"> this is content heading <br>
</p><br>
<span class="det">this is content side</span> <button class="clk">Watch</button><br><br>
<span class="det">this is content side</span><button class="clk">Watch</button><br><br><br>
<h2>this is demo</h2>
<p id="exp">this is content end</p>
</div>
<div id="foo">
<footer>
<p>Copyright © company 2022<br><br> All Rights Reserved</p>
</footer>
</div>
</body>
</html>
I'm trying to make a responsive website and when I put my paragraph on the page and I make the screen smaller the paragraph goes all the way down the screen and not really in a paragraph. It is just a long word tower. How can I fix this? Here is a picture of what I am talking about. https://i.stack.imgur.com/HYJzs.png
and also how do I make it so thre is not that much space between the words?
here is my code:
enter cod
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
display: flex;
height: 120px;
width: 100%;
background: #192841;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
margin-bottom: 100px;
}
nav .logo {
color: #fff;
font-size: 30px;
font-weight: 600;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 15px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: #111;
background: #fff;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: cyan;
}
}
/*index*/
.contentHome {
position: absolute;
top: 5%;
margin-top: 100px;
text-align: center;
width: 100%;
color: #1b1b1b;
}
.contentHome div {
font-size: 30px;
font-weight: 400;
}
.contentHome2 {
margin-left: 100px;
margin-top: 150px;
width: 40%;
text-align: justify;
height: 100px;
align-items: center;
}
.paragrahHome h2 {
white-space: nowrap;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Responsive Navigation Menu</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo">Nick's Reviews</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="../index.html">Home</a></li>
<li>Google Form</li>
<li>Movies</li>
<li>Tv-Shows</li>
<li>Top Movies</li>
<li>Top Tv-Shows</li>
</ul>
</nav>
<div class="contentHome">
<div>Welcome To Nick's Movie And Tv-Show Reviews</div>
</div>
<div class="contentHome2">
<div class="paragrahHome">
<h2>About this website:</h2>
<p>
Welcome to my Nick's Reviews. This website will be about the movies,
and TV shows that I have watched and what I think about them. When I
write my reviews, I will give honest feedback about them and the
ratings I think they deserve. I will also list the ratings of movies
and TV shows from popular websites (such as Rotten Tomatoes, IBDM, and
other trusted sources). If you want to recommend and comment on a
movie or TV show you want me to watch, just go to the Google form and
fill it out.
</p>
</div>
</div>
</body>
</html>
at .contenthome2 you have defined width 40% so that is why for mobile view it takes up only 40% of width , you can give 40% for web view and using media queries can increase the width for paragraph as per your requirements .also margin-left:100px and margin-right:150px will work fine for web view but will take more space for mobile view . you can try using value in % .
I have modified code and given width:100% and padding:10% 15%;
#import url("https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap");
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
nav {
display: flex;
height: 120px;
width: 100%;
background: #192841;
align-items: center;
justify-content: space-between;
padding: 0 50px 0 100px;
flex-wrap: wrap;
margin-bottom: 100px;
}
nav .logo {
color: #fff;
font-size: 30px;
font-weight: 600;
}
nav ul {
display: flex;
flex-wrap: wrap;
list-style: none;
}
nav ul li {
margin: 0 5px;
}
nav ul li a {
color: #f2f2f2;
text-decoration: none;
font-size: 15px;
font-weight: 500;
padding: 8px 15px;
border-radius: 5px;
letter-spacing: 1px;
transition: all 0.3s ease;
}
nav ul li a.active,
nav ul li a:hover {
color: #111;
background: #fff;
}
nav .menu-btn i {
color: #fff;
font-size: 22px;
cursor: pointer;
display: none;
}
input[type="checkbox"] {
display: none;
}
#media (max-width: 1000px) {
nav {
padding: 0 40px 0 50px;
}
}
#media (max-width: 920px) {
nav .menu-btn i {
display: block;
}
#click:checked ~ .menu-btn i:before {
content: "\f00d";
}
nav ul {
position: fixed;
top: 80px;
left: -100%;
background: #111;
height: 100vh;
width: 100%;
text-align: center;
display: block;
transition: all 0.3s ease;
}
#click:checked ~ ul {
left: 0;
}
nav ul li {
width: 100%;
margin: 40px 0;
}
nav ul li a {
width: 100%;
margin-left: -100%;
display: block;
font-size: 20px;
transition: 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
#click:checked ~ ul li a {
margin-left: 0px;
}
nav ul li a.active,
nav ul li a:hover {
background: none;
color: cyan;
}
}
/*index*/
.contentHome {
position: absolute;
top: 5%;
margin-top: 100px;
text-align: center;
width: 100%;
color: #1b1b1b;
}
.contentHome div {
font-size: 30px;
font-weight: 400;
}
.contentHome2 {
padding: 5% 10%;
width: 100%;
text-align: justify;
height: 100px;
align-items: center;
}
.paragrahHome h2 {
white-space: nowrap;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8" />
<title>Responsive Navigation Menu</title>
<link rel="stylesheet" href="style.css" />
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"
/>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>
<body>
<nav>
<div class="logo">Nick's Reviews</div>
<input type="checkbox" id="click" />
<label for="click" class="menu-btn">
<i class="fas fa-bars"></i>
</label>
<ul>
<li><a class="active" href="../index.html">Home</a></li>
<li>Google Form</li>
<li>Movies</li>
<li>Tv-Shows</li>
<li>Top Movies</li>
<li>Top Tv-Shows</li>
</ul>
</nav>
<div class="contentHome">
<div>Welcome To Nick's Movie And Tv-Show Reviews</div>
</div>
<div class="contentHome2">
<div class="paragrahHome">
<h2>About this website:</h2>
<p>
Welcome to my Nick's Reviews. This website will be about the movies,
and TV shows that I have watched and what I think about them. When I
write my reviews, I will give honest feedback about them and the
ratings I think they deserve. I will also list the ratings of movies
and TV shows from popular websites (such as Rotten Tomatoes, IBDM, and
other trusted sources). If you want to recommend and comment on a
movie or TV show you want me to watch, just go to the Google form and
fill it out.
</p>
</div>
</div>
</body>
</html>
I tried to create responsive menu which after resizing (<992px) create hamburger menu that will roll from the right side and it will be on 100vh of website's height. Everything works but the content of the website is on top of the sidebar menu after transition. I tried to set the position to absolute or relative nothing works. Also I tried to hide the content after label is checked but it didn't work too. Any ideas how can I fix that?
Code:
/* General */
html,
body {
height: 100%;
font-size: 100%;
font-family: 'Montserrat', sans-serif;
}
html {
box-sizing: border-box;
}
*,
*:before,
*:after {
box-sizing: inherit;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
min-height: 100%;
}
.container {
position: relative;
margin-right: auto;
margin-left: auto;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.main-content {
padding-top: 20px;
padding-bottom: 50px;
}
footer {
height: 50px;
margin-top: -50px;
background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
/* Menu */
.menu {
width: 100%;
height: 58px;
}
.menu-items ul {
float: right;
}
.menu-items ul li {
display: inline;
padding: 20px;
list-style: none;
}
.menu-items ul li a {
line-height: 75px;
font-weight: 300;
color: #000;
text-decoration: none;
}
.menu-items ul li a:hover {
color: #4956cc;
transition: 0.1s
}
.menu-items ul li a.active {
color: #ffa136;
}
.logo-place {
line-height: 75px;
display: inline;
float: left;
}
.checkbtn {
font-size: 30px;
color: #000;
float: right;
line-height: 85px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#media (max-width:992px) {
.checkbtn {
display: block;
}
.menu-items ul {
position: fixed;
width: 100%;
height: 100vh;
top: 80px;
right: -100%;
background: #000;
text-align: center;
transition: all .5s;
}
.menu-items ul li {
display: block;
margin-top: 10px;
}
.menu-items ul li a {
font-size: 20px;
color: #fff;
}
#check:checked~.menu-items ul {
right: 0;
}
}
/* Welcome-section */
.welcome-section {
background-color: red;
}
.welcome-section h1 {
color: #fff;
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="wrapper">
<div class="menu container">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<div class="logo-place">
<img src="img/logo.png" alt="">
</div>
<div class="menu-items">
<ul>
<li><a class="active" href="index.html">My Story</a></li>
<li>Blog</li>
<li>Contact</li>
<li>Instagram</li>
<li>Linkedin</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="welcome-section">
<div class="container">
<div class="portrait">
<img src="img/portrait.png" alt="">
</div>
<h1>bla bla bla bla bla <br> bla bla bla.</h1>
</div>
</div>
</div>
</div>
<footer></footer>
You need to give the sidebar a z-index:
.menu-items ul {
float: right;
z-index: 999; /* Insert this line */
}
The z-index CSS property sets the z-order of a positioned element and its descendants or flex items. Overlapping elements with a larger z-index cover those with a smaller one.
Source: MDN
/* General */
html,
body {
height: 100%;
font-size: 100%;
font-family: 'Montserrat', sans-serif;
}
html {
box-sizing: border-box;
}
*,
*::before,
*::after {
box-sizing: inherit;
}
img {
max-width: 100%;
height: auto;
}
.wrapper {
min-height: 100%;
}
.container {
position: relative;
margin-right: auto;
margin-left: auto;
padding-left: 0.9375rem;
padding-right: 0.9375rem;
}
.main-content {
padding-top: 20px;
padding-bottom: 50px;
}
footer {
height: 50px;
margin-top: -50px;
background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
/* Menu */
.menu {
width: 100%;
height: 58px;
}
.menu-items ul {
float: right;
z-index: 999;
}
.menu-items ul li {
display: inline;
padding: 20px;
list-style: none;
}
.menu-items ul li a {
line-height: 75px;
font-weight: 300;
color: #000;
text-decoration: none;
}
.menu-items ul li a:hover {
color: #4956cc;
transition: 0.1s
}
.menu-items ul li a.active {
color: #ffa136;
}
.logo-place {
line-height: 75px;
display: inline;
float: left;
}
.checkbtn {
font-size: 30px;
color: #000;
float: right;
line-height: 85px;
cursor: pointer;
display: none;
}
#check {
display: none;
}
#media (max-width:992px) {
.checkbtn {
display: block;
}
.menu-items ul {
position: fixed;
width: 100%;
height: 100vh;
top: 80px;
right: -100%;
background: #000;
text-align: center;
transition: all .5s;
}
.menu-items ul li {
display: block;
margin-top: 10px;
}
.menu-items ul li a {
font-size: 20px;
color: #fff;
}
#check:checked~.menu-items ul {
right: 0;
}
}
/* Welcome-section */
.welcome-section {
background-color: red;
}
.welcome-section h1 {
color: #fff;
}
<link href="https://fonts.googleapis.com/css2?family=Montserrat:wght#300;500&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css">
<div class="wrapper">
<div class="menu container">
<input type="checkbox" id="check">
<label for="check" class="checkbtn">
<i class="fas fa-bars"></i>
</label>
<div class="logo-place">
<img src="img/logo.png" alt="">
</div>
<div class="menu-items">
<ul>
<li><a class="active" href="index.html">My Story</a></li>
<li>Blog</li>
<li>Contact</li>
<li>Instagram</li>
<li>Linkedin</li>
</ul>
</div>
</div>
<div class="main-content">
<div class="welcome-section">
<div class="container">
<div class="portrait">
<img src="img/portrait.png" alt="">
</div>
<h1>bla bla bla bla bla <br> bla bla bla.</h1>
</div>
</div>
</div>
</div>
<footer></footer>
Add z-index: 9; to .menu-items ul which is in #media (max-width:992px)
Good day guys,
As you can see in the image they are stick to each other in desktop view, however on the real code I wasn't been able to do it, I tried to use the overflow but the result is not what I expected. Heres my code https://jsfiddle.net/Jury/0bqpLw1h/1/.. Thank you so much for your help
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website */
/* .content {
height: 100vh;
overflow: hidden;
} */
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 6rem;
font-family: "Coiny", sans-serif;
font-size: 3.2rem;
}
.circle {
position: absolute;
border-radius: 50%;
width: 100%;
height: 50rem;
background-color: #6CA9A5;
z-index: 1;
margin: 0;
margin-top: -75%;
}
.about {
height: 100vh;
width:100%;
background-color: crimson;
z-index: 3;
position:absolute;
/*bottom : 0;*/
}
/* Media Queries for tablet and mobile */
#media screen and (max-width: 990px) {
.menu-toggle {
display: block;
}
nav {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
text-align: center;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-top: 5rem;
}
nav ul li a {
margin 0;
font-size: 3rem;
}
nav ul li:first-child{
margin-top: 0;
}
.overlay.menu-open,
nav.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
nav img {
height: 15rem;
margin: 0;
}
.menu {
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Raleway|Coiny|Roboto|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Jury Gregorio - Welcome</title>
</head>
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
<script>
var open = document.getElementById('hamburger');
var changeIcon = true;
open.addEventListener("click", function(){
var overlay = document.querySelector('.overlay');
var nav = document.querySelector('nav');
var icon = document.querySelector('.menu-toggle i');
overlay.classList.toggle("menu-open");
nav.classList.toggle("menu-open");
if (changeIcon) {
icon.classList.remove("fa-bars");
icon.classList.add("fa-times");
changeIcon = false;
}
else {
icon.classList.remove("fa-times");
icon.classList.add("fa-bars");
changeIcon = true;
}
});
</script>
</body>
</html>
Small changes in the css can make the image like look. Just make a small change in .about. and this will work. output of the below code
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
I have made some changes along with some brief explanation to the CSS file, in particular, the .content and .circle selector. Best viewed in desktop environment.
Fiddle
Just add this style before your media query also you check it on this fiddle https://jsfiddle.net/v8r463je/
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
.content{
background-color: #0b2947;
}
/* Media Queries for tablet and mobile */
Output here
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-size: 10px;
}
a {
text-decoration: none;
}
.body {
height: 100vh;
background-image: linear-gradient(
rgba(0, 31, 63, 0.958),
rgba(0, 31, 63, 0.958) )
,url(img/bgmain.jpg);
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
}
.overlay{
background-color: rgba(0,0,0,.95);
position: fixed;
right: 0;
left: 0;
top: 0;
bottom: 0;
transition: opacity 650ms;
transform: scale(0);
opacity: 0;
display: none;
}
/* Hamburger Menu */
.menu-toggle {
position: fixed;
top: 2.5rem;
right: 2.5rem;
color: #eeeeee;
font-size: 3rem;
cursor: pointer;
z-index: 1000;
display: none;
}
/* End of Hamburger Menu */
/* Navagation Link */
header {
font-family: "Raleway", sans-serif;
position: relative;
width: 100%;
height: 10rem;
z-index: 2;
}
nav {
/* padding-top: 5rem; */
display: flex;
height: 100%;
justify-content: space-between;
align-items: center;
text-transform: uppercase;
font-size: 1.4rem;
}
nav img {
height: 7rem;
margin: 0 0 0 12rem;
}
nav ul {
display: flex;
}
nav ul li {
list-style: none;
}
nav ul li a {
font-weight: 900;
font-size: 1.4rem;
padding: 1rem 0;
margin: 0 1rem;
position: relative;
color: #eee;
}
.menu {
margin: 0 12rem 0 0;
}
.menu a {
font-size: 1rem;
margin: 0 .1rem;
outline: none;
}
.menu a:last-child{
margin-right: 0;
}
nav ul li a::before,
nav ul li a::after {
content: '';
position: absolute;
width: 100%;
height: 2px;
background-color: #f4511e;
left: 0;
transform: scaleX(0);
transition: all .5s;
}
nav ul li a::before{
top: 0;
transform-origin: left;
}
nav ul li a::after{
bottom: 0;
transform-origin: right;
}
nav ul li a:hover::before,
nav ul li a:hover::after{
transform: scaleX(1);
}
.btn {
border: none;
border-radius: 30px;
background-color: #f4511e;
color: #fff;
font-size: 1rem;
font-weight: bold;
text-align: center;
padding: 9px;
width: 70px;
text-transform: uppercase;
}
.btninfo{
padding: 9px 19px;
}
/* End of Navagation Menu */
/* Content of the Website */
/* .content {
height: 100vh;
overflow: hidden;
} */
.possible {
color: #fff;
text-align: center;
letter-spacing: 10px;
text-transform: uppercase;
padding-top: 6rem;
font-family: "Coiny", sans-serif;
font-size: 3.2rem;
}
.circle {
position: relative;
border-radius: 50%;
width: 50rem;
height: 50rem;
background-color: #6CA9A5;
margin: 10rem auto;
z-index: 1;
}
.about {
position: absolute;
height: 100vh;
background-color: crimson;
z-index: 3;
width: 100%;
margin-top: -270px;
}
.content{
background-color: #0b2947;
}
/* Media Queries for tablet and mobile */
#media screen and (max-width: 990px) {
.menu-toggle {
display: block;
}
nav {
display: none;
flex-direction: column;
justify-content: space-evenly;
align-items: center;
height: 100vh;
text-align: center;
}
nav ul {
flex-direction: column;
}
nav ul li {
margin-top: 5rem;
}
nav ul li a {
margin 0;
font-size: 3rem;
}
nav ul li:first-child{
margin-top: 0;
}
.overlay.menu-open,
nav.menu-open{
display: flex;
transform: scale(1);
opacity: 1;
}
nav img {
height: 15rem;
margin: 0;
}
.menu {
margin-right: 0;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://fonts.googleapis.com/css?family=Raleway|Coiny|Roboto|Montserrat" rel="stylesheet">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.1/css/all.css">
<link rel="stylesheet" href="style.css">
<title>Jury Gregorio - Welcome</title>
</head>
<body>
<div class="body">
<header>
<div class="menu-toggle" id="hamburger">
<i class="fas fa-bars"></i>
</div>
<div class="overlay"></div>
<nav>
<img src="img/logo2.png" alt="Logo" class="logo">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
</ul>
<div class="menu">
Contact
Info
</div>
</nav>
</header>
<div class="content">
<h1 class="possible">Everything is Possible</h1>
<div class="circle">
</div>
</div>
<div class="about">
<h1>Helow</h1>
</div>
</div>
<script>
var open = document.getElementById('hamburger');
var changeIcon = true;
open.addEventListener("click", function(){
var overlay = document.querySelector('.overlay');
var nav = document.querySelector('nav');
var icon = document.querySelector('.menu-toggle i');
overlay.classList.toggle("menu-open");
nav.classList.toggle("menu-open");
if (changeIcon) {
icon.classList.remove("fa-bars");
icon.classList.add("fa-times");
changeIcon = false;
}
else {
icon.classList.remove("fa-times");
icon.classList.add("fa-bars");
changeIcon = true;
}
});
</script>
</body>
</html>
Example of how the webpage looks like:
So I tried doing this using flexbox. but I'm not very familiar with flexbox.
The goal is to have 4 equal boxes in the center of the page. Similar to the current frontpage of this websie: http://arma-life.org/# (Scroll down to see the boxes in the section "For You').
I have tried looking at the current code, but the old designer did something and I can't seem to get that code to work on the new frontpage. It should be almost similar with the image, title and explanation. But the href can be dropped.
Can anyone point me in the right direction to do this please or help me out. I've litterally tried flexbox, align, margins, ...
It should also be responsive for phones and stuff. It should be underneath the HR.
Here is my current code:
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
overflow-x: hidden;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
#media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
#media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
.A3L_Slogan, .slideshow{
position: relative;
}
.slideshow{
height: 600px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 600px;
left:0;
top:0;
}
.slogan_hr {
width: 960px;
margin: 15px auto 15px auto;
}
hr.style14 {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.A3L_Slogan {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.slogan_title {
font-size: 46px;
font-weight: 700;
padding: 15px;
text-transform: uppercase;
}
.slogan_catchphrase {
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
}
#media only screen and (max-width: 640px) {
.slideshow{
height: 300px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 300px;
left:0;
top:0;
}
.slogan_hr {
width: 600px;
margin: 15px auto 15px auto;
}
}
#media only screen and (max-width: 600px) {
.slideshow{
height: 200px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 200px;
left:0;
top:0;
}
.slogan_hr {
width: 560px;
margin: 15px auto 15px auto;
}
}
#media only screen and (max-width: 480px) {
.logo {
max-width: 270px;
}
}
/** features & articles **/
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 4000);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img class="logo" src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li>Forums</li>
<li>Rules</li>
<li>Monetization</li>
<li>Sign-up</li>
<li>Staff</li>
</ul>
</nav>
</div>
</header>
<div class="slideshow">
<div class="fadein">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg" alt="">
</div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
<div class="slogan_catchphrase">
The next level roleplay experience
</div>
<div class="slogan_hr">
<hr class="style14">
</div>
</div>
</body>
</html>
I hope this is what you want
body {
width: 100%;
margin: 0;
font-family: 'open sans', sans-serif;
zoom: 1;
overflow-x: hidden;
}
.flexbox {
display: flex;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
}
.flexbox .box {
background: #0077dd;
/* width: 150px; */
height: 150px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-ms-flex-direction: column;
flex-direction: column;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
width: 40%;
margin: 2%;
}
header {
padding: 20px 0;
background-color: #ffffff;
box-shadow: 0 4px 6px rgba(0,0,0,.2);
}
.container {
padding: 0 20px;
margin: 0 auto;
}
.logo-box {
float: left;
margin-right: 20px;
}
.logo-box a {
outline: none;
display: block;
}
.logo-box img {display: block;}
nav {
overflow: hidden;
}
ul {
list-style: none;
margin: 0;
padding: 0px 10px 0px 0px;
float: right;
}
nav li {
display: inline-block;
margin-left: 25px;
height: 70px;
line-height: 70px;
transition: .5s linear;
}
nav a {
text-decoration: none;
display: block;
position: relative;
color: #868686;
text-transform: uppercase;
}
nav a:after {
content: "";
width: 0;
height: 2px;
position: absolute;
left: 0;
bottom: 15px;
background: #868686;
transition: width .5s linear;
}
nav a:hover:after {width: 100%;}
#media screen and (max-width: 660px) {
header {text-align: center;}
.logo-box {
float: none;
display: inline-block;
margin: 0 0 16px 0;
}
ul {float: none;}
nav li:first-of-type {margin-left: 0;}
}
#media screen and (max-width: 550px) {
nav {overflow: visible;}
nav li {
display: block;
margin: 0;
height: 40px;
line-height: 40px;
}
nav li:hover {background: rgba(0,0,0,.1);}
nav a:after {content: none;}
}
.A3L_Slogan, .slideshow{
position: relative;
}
.slideshow{
height: 600px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 600px;
left:0;
top:0;
}
.slogan_hr {
width: 960px;
margin: 15px auto 15px auto;
}
hr.style14 {
border: 0;
height: 1px;
background-image: -webkit-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -moz-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -ms-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
background-image: -o-linear-gradient(left, #f0f0f0, #8c8b8b, #f0f0f0);
}
.A3L_Slogan {
margin-top: 20px;
margin-bottom: 20px;
text-align: center;
}
.slogan_title {
font-size: 46px;
font-weight: 700;
padding: 15px;
text-transform: uppercase;
}
.slogan_catchphrase {
font-size: 30px;
font-weight: 500;
text-transform: uppercase;
}
#media only screen and (max-width: 640px) {
.slideshow{
height: 300px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 300px;
left:0;
top:0;
}
.slogan_hr {
width: 600px;
margin: 15px auto 15px auto;
}
}
#media only screen and (max-width: 600px) {
.slideshow{
height: 200px;
}
.fadein img {
width: 100%;
position: absolute;
max-height: 200px;
left:0;
top:0;
}
.slogan_hr {
width: 560px;
margin: 15px auto 15px auto;
}
}
#media only screen and (max-width: 480px) {
.logo {
max-width: 270px;
}
}
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$(function () {
$('.fadein img:gt(0)').hide();
setInterval(function () {
$('.fadein :first-child').fadeOut().next('img').fadeIn().end().appendTo('.fadein');
}, 4000);
});
</script>
</head>
<body>
<header>
<div class="container">
<div class="logo-box">
<a href="/">
<img class="logo" src="images/logo.png">
</a>
</div>
<nav>
<ul>
<li>Forums</li>
<li>Rules</li>
<li>Monetization</li>
<li>Sign-up</li>
<li>Staff</li>
</ul>
</nav>
</div>
</header>
<div class="slideshow">
<div class="fadein">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-159465.jpg" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-160434.png" alt="">
<img src="http://wallpapers.wallhaven.cc/wallpapers/full/wallhaven-150988.jpg" alt="">
</div>
</div>
<div class="A3L_Slogan">
<div class="slogan_title">
Hardcore Roleplay Community
</div>
<div class="slogan_catchphrase">
The next level roleplay experience
</div>
<div class="slogan_hr">
<hr class="style14">
</div>
</div>
<div class="flexbox">
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
<div class="box"></div>
</div>
</body>
</html>
Easiest way to create 4 boxes in 2 columns (with no need for flex) is to put 50% width inline-blocks inside an element and remove everything what may cause extra whitespace from parent:
html:
<div class="parent">
<div class="child">
<div class="boxcontent">1</div>
</div>
<div class="child">
<div class="boxcontent">2</div>
</div>
<div class="child">
<div class="boxcontent">3</div>
</div>
<div class="child">
<div class="boxcontent">4</div>
</div>
</div>
css:
.parent {
width: 100%;
max-width: 1000px; // limit width for extra large screens
font-size: 0;
line-height: 0;
letter-spacing: 0;
margin: 0 auto; // to center on less than 100% width
}
.child {
display: inline-block;
vertical-align: middle;
width: 50%;
box-sizing: border-box;
padding: 100px;
}
.boxcontent {
font-size: 16px;
line-height: 20px;
background-color: red;
height: 25%;
}
For mobile set child width to 100%;