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%;
Related
Still learning code. I am building a contact page and wanted to include my header bar at the top of the page, but when I added the code for this my header bar appears to the left of my page all wacky. I know this is most likely a CSS error, but I can't seem to pinpoint why my header bar wouldn't display at the top of my page. Anyone willing to take a look? Here's my code.
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</body>
</html>
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
Your <header> (as opposed to <head>) has to be inside the <body> tag (which contains everything that is visible on the page)!
As a start, IMO, <body> should not be styled as flex, at least not when using <header> which brings its own defaults which were being overridden.
Moving the flex styles from body to .container will fix your immediate request, but probably introduce other styling concerns.
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2;
/* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color: #067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.container {
display: flex;
align-items: center;
justify-content: center;
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content {
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side {
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before {
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details {
margin: 14px;
text-align: center;
}
.content .left-side .details i {
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic {
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two {
font-size: 14px;
color: #afafb6;
}
.container .content .right-side {
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text {
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box {
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea {
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box {
min-height: 110px;
}
.right-side .input-box textarea {
padding-top: 6px;
}
.right-side .button {
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"] {
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover {
background: #bc0456;
}
#media (max-width: 950px) {
.container {
width: 90%;
padding: 30px 40px 40px 35px;
}
.container .content .right-side {
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container {
margin: 40px 0;
height: 100%;
}
.container .content {
flex-direction: column-reverse;
}
.container .content .left-side {
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before {
display: none;
}
.container .content .right-side {
width: 100%;
margin-left: 0;
}
}
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css" />
</head>
<body>
<header>
<section class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</section>
</header>
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now">
</div>
</form>
</div>
</div>
</div>
</body>
</html>
The problem occurs from the body. You assign to flex. I removed it and create a new div which wrappend the container. If you want reduce the width in the navbar you have to wrapped to another div and center it.
/* About ME */
/* Google Font CDN Link */
/* Header */
.header {
width: 100%;
height: 50px;
display: block;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.header_content {
width: 100%;
height: 100%;
display: block;
margin: 0 auto;
background-color: #61d1e2; /* For browsers that do not support gradients */
background-image: linear-gradient(#e7bddc, #61d1e2);
}
.logo_container {
height: 100%;
display: table;
float: left;
border: none;
}
.logo {
max-height: 50px;
display: table-cell;
vertical-align: middle;
}
/* Navigation */
.navigation {
float: right;
height: 100%;
margin: 0;
}
.navigation li {
float: left;
height: 100%;
display: table-cell;
padding: 15px 20px;
position: relative;
box-sizing: border-box;
text-decoration: none;
}
a:hover {
color: #bc0456 !important;
}
.navigation li a {
display: inline-block;
vertical-align: middle;
height: 100%;
color:#067393;
font-family: Kapelka New;
text-decoration: none !important;
}
.sub_menu1 {
display: none;
}
.navigation li:hover .sub_menu1 {
display: block;
position: absolute;
background: black;
top: 100%;
}
.navigation li:hover .sub_menu1 ul {
display: inline-block;
margin: 0%;
padding: 0%;
text-align: center;
}
.navigation li:hover .sub_menu1 ul li {
padding: 5px;
}
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: "Poppins" , sans-serif;
}
body{
min-height: 100vh;
width: 100%;
background: #f99a61;
}
.wrapper {
display: flex;
align-items: center;
justify-content: center;
}
.container{
width: 85%;
background: #fff;
border-radius: 6px;
padding: 20px 60px 30px 40px;
box-shadow: 0 5px 10px rgba(0, 0, 0, 0.2);
}
.container .content{
display: flex;
align-items: center;
justify-content: space-between;
}
.container .content .left-side{
width: 25%;
height: 100%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
margin-top: 15px;
position: relative;
}
.content .left-side::before{
content: '';
position: absolute;
height: 70%;
width: 2px;
right: -15px;
top: 50%;
transform: translateY(-50%);
background: #afafb6;
}
.content .left-side .details{
margin: 14px;
text-align: center;
}
.content .left-side .details i{
font-size: 30px;
color: #067393;
margin-bottom: 10px;
}
.content .left-side .details .topic{
font-size: 18px;
font-weight: 500;
}
.content .left-side .details .text-one,
.content .left-side .details .text-two{
font-size: 14px;
color: #afafb6;
}
.container .content .right-side{
width: 75%;
margin-left: 75px;
}
.content .right-side .topic-text{
font-size: 23px;
font-weight: 600;
color: #bc0456;
}
.right-side .input-box{
height: 50px;
width: 100%;
margin: 12px 0;
}
.right-side .input-box input,
.right-side .input-box textarea{
height: 100%;
width: 100%;
border: none;
outline: none;
font-size: 16px;
background: #F0F1F8;
border-radius: 6px;
padding: 0 15px;
resize: none;
}
.right-side .message-box{
min-height: 110px;
}
.right-side .input-box textarea{
padding-top: 6px;
}
.right-side .button{
display: inline-block;
margin-top: 12px;
}
.right-side .button input[type="button"]{
color: #fff;
font-size: 18px;
outline: none;
border: none;
padding: 8px 16px;
border-radius: 6px;
background: #067393;
cursor: pointer;
transition: all 0.3s ease;
}
.button input[type="button"]:hover{
background: #bc0456;
}
#media (max-width: 950px) {
.container{
width: 90%;
padding: 30px 40px 40px 35px ;
}
.container .content .right-side{
width: 75%;
margin-left: 55px;
}
}
#media (max-width: 820px) {
.container{
margin: 40px 0;
height: 100%;
}
.container .content{
flex-direction: column-reverse;
}
.container .content .left-side{
width: 100%;
flex-direction: row;
margin-top: 40px;
justify-content: center;
flex-wrap: wrap;
}
.container .content .left-side::before{
display: none;
}
.container .content .right-side{
width: 100%;
margin-left: 0;
}
}
<!DOCTYPE html>
<!-- Created By CodingLab - www.codinglabweb.com -->
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<!-- <title> Responsive Contact Us Form | CodingLab </title>
<link rel="stylesheet" href="style.css">
<!-- Fontawesome CDN Link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.2/css/all.min.css"/>
<link href="css/stylesheet2.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<header class="header">
<div class="header_content">
<div class="logo_container">
<a href="index.html">
<img alt="ArtUcii logo" class="logo" src="images/Artucii_logo.png">
</a>
</div>
<ul class="navigation">
<li>Home</li>
<li>Portfolio</li>
<li>About ME
<li>Contact</li>
</ul>
</div>
</header>
<div class="wrapper">
<div class="container">
<div class="content">
<div class="left-side">
<div class="address details">
<i class="fas fa-map-marker-alt"></i>
<div class="topic">Address</div>
<div class="text-one">Los Angles, CA</div>
<div class="text-two">Austin,TX</div>
</div>
<div class="phone details">
<i class="fas fa-phone-alt"></i>
<div class="topic">Phone</div>
<div class="text-one">(512) xxx-xxxx</div>
<div class="text-two">+</div>
</div>
<div class="email details">
<i class="fas fa-envelope"></i>
<div class="topic">Email</div>
<div class="text-one">artuciidesign#gmail.com</div>
<div class="text-two">alexandria.brown3#snhu.com</div>
</div>
</div>
<div class="right-side">
<div class="topic-text">Send me a message!</div>
<br>
<p>Any questions or ideas, just fill out the form below and I'll be happy to help.</p>
<form action="#">
<div class="input-box">
<input type="text" placeholder="Enter your name">
</div>
<div class="input-box">
<input type="text" placeholder="Enter your email">
</div>
<div class="input-box message-box">
</div>
<div class="button">
<input type="button" value="Send Now" >
</div>
</form>
</div>
</div>
</div>
</div>
</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.
* {
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;
}
}
I want to make a circular background as shown in the photo:
desktop version
mobile version
However, I don't know how to make a correct structure in HTML and CSS. I'm starting from mobile and from there I want to expand to bigger sizes. My problem is I don't know how to make the circle responsive and to make it looks like on the picture, especially on the mobile version. I'm not sure if I should use the ::after for the circle but in my example I have the position absolute on the div so I really can't.
header {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: -webkit-sticky;
position: sticky;
width: 100%;
padding: 1em 3em;
min-height: 8vh;
text-align: center;
top: 0;
z-index: 4;
background-color: white;
}
header img {
width: 8em;
}
header ul {
list-style: none;
}
header ul li {
display: inline-block;
padding: 1em 2em;
color: white;
position: relative;
overflow: hidden;
will-change: transform;
}
header ul li a {
text-decoration: none;
color: black;
font-weight: 700;
font-size: clamp(1.5rem, 5vw, 1.8rem);
}
header .burger {
display: none;
}
#media only screen and (max-width: 996px) {
header .burger {
display: block;
width: 4em;
cursor: pointer;
}
header .burger img {
width: 3em;
}
header ul {
display: none;
}
}
#media only screen and (max-width: 1022px) {
.overlay {
position: fixed;
z-index: 4;
width: 100%;
height: 100%;
padding: 2em;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
overflow-y: scroll;
}
.overlay .close {
position: absolute;
top: 2em;
right: 2em;
width: 3em;
height: 3em;
cursor: pointer;
}
.overlay img {
width: 10em;
}
.overlay .overlay-list {
list-style-type: none;
text-align: center;
}
.overlay .overlay-list li {
color: black;
font-size: 2rem;
font-family: Josefin Sans;
padding: .6em 0;
}
.overlay .overlay-list li a {
text-decoration: none;
color: black;
}
}
#media only screen and (min-width: 1024px) {
.overlay {
display: none;
}
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Raleway", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 800;
}
.hero {
width: 100%;
min-height: 100vh;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(var(--unnamed-color-fafafa))) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, var(--unnamed-color-fafafa) 100%) 0% 0% no-repeat padding-box;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(#fafafa)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, #fafafa 100%) 0% 0% no-repeat padding-box;
z-index: 1;
position: relative;
}
.hero__container {
padding: 2em;
height: 70vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 4;
overflow: hidden;
}
.hero__container::after {
content: '';
position: absolute;
width: 600px;
height: 600px;
z-index: -1;
top: 0;
left: 0;
background-color: #387546;
border-radius: 0 0 0 60%;
}
.hero__container .food-bg {
background-image: url("../images/background+pict.png");
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
right: -36%;
}
.hero__container .left-col {
width: 68%;
z-index: 2;
}
.hero__container .left-col h1 {
color: white;
margin-bottom: .7em;
}
.hero__container .left-col p {
color: white;
margin-bottom: 2em;
width: 70%;
}
.btn {
text-decoration: none;
color: white;
padding: .7em 0.7em .7em 1em;
border-radius: .8em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.btn__gold {
background-color: #f19a33;
}
.button__icon {
width: 1.5em;
height: 1.5em;
fill: currentcolor;
margin-left: 1em;
}
/*# sourceMappingURL=main.css.map */
<link href="https://fonts.googleapis.com/css2?family=Raleway:wght#400;500;700;900&display=swap" rel="stylesheet">
<div class="overlay">
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="overlay-logo" alt="logo">
</a>
<img src="/images/icon-close.svg" class="close" alt="close">
<ul class="overlay-list">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<header>
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="header-logo" alt="logo">
</a>
<nav>
<ul class="header-links">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="hamburger-icon">
</div>
</nav>
</header>
<div class="hero">
<div class="hero__container">
<div class="left-col">
<h1>Healthy & Fresh Food For You</h1>
<p>Created for lover of healty, delicious and non-obvious food</p>
Check Menu<svg xmlns="http://www.w3.org/2000/svg" class="button__icon" viewBox="0 0 30 24" width="50" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="rgba(255,255,255,1)"/></svg>
</div>
<div class="food-bg"></div>
</div>
</div>
This is a simple solution. There're many others.
.wrapper {
width: 90%;
height: 400px;
overflow: hidden;
background: lightgreen;
box-shadow: 1px 1px 5px 2px rgba(0,0,0,0.4);
}
nav {
width: 100%;
height: 60px;
background: #fff;
position: relative;
z-index: 20;
border-bottom: 1px solid black;
}
.background {
position: relative;
width: 100%;
height: 0;
right: 0;
}
.background > div {
position: absolute;
right: -50px;
top: -20px;
width: 400px;
height: 400px;
border-radius: 50%;
background: green;
}
<div class="wrapper">
<div class="background">
<div></div>
</div>
<nav>Menu</nav>
</div>
There are a number of ways to do this, and here's one. For brevity, only one breakpoint was added, and for mobile, it was assumed this was an intro screen with no scrolling content, so the background will adapt to the viewport size. You may want to add some adjustment to get it to the desired placement for each breakpoint:
header {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
position: -webkit-sticky;
position: sticky;
width: 100%;
padding: 1em 3em;
min-height: 8vh;
text-align: center;
top: 0;
z-index: 4;
background-color: white;
}
header img {
width: 8em;
}
header ul {
list-style: none;
}
header ul li {
display: inline-block;
padding: 1em 2em;
color: white;
position: relative;
overflow: hidden;
will-change: transform;
}
header ul li a {
text-decoration: none;
color: black;
font-weight: 700;
font-size: clamp(1.5rem, 5vw, 1.8rem);
}
header .burger {
display: none;
}
* {
margin: 0;
padding: 0;
-webkit-box-sizing: border-box;
box-sizing: border-box;
}
body {
font-family: "Raleway", sans-serif;
}
h1,
h2,
h3,
h4,
h5,
h6 {
font-weight: 800;
}
.hero {
width: 100%;
min-height: 100vh;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(var(--unnamed-color-fafafa))) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, var(--unnamed-color-fafafa) 100%) 0% 0% no-repeat padding-box;
background: transparent -webkit-gradient(linear, left top, left bottom, from(#def0d8), to(#fafafa)) 0% 0% no-repeat padding-box;
background: transparent linear-gradient(180deg, #def0d8 0%, #fafafa 100%) 0% 0% no-repeat padding-box;
z-index: 1;
position: relative;
}
.hero__container {
padding: 2em;
height: 90vh;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
z-index: 4;
overflow: hidden;
}
.hero__container::after {
content: '';
position: absolute;
width: 300vw;
height: 300vw;
z-index: -1;
top: -170vw;
right: -160vw;
background-color: #387546;
border-radius: 50%;
}
.hero__container .food-bg {
background-image: url("../images/background+pict.png");
background-position: top;
background-repeat: no-repeat;
background-size: contain;
position: absolute;
width: 100%;
height: 100%;
z-index: 1;
right: -36%;
}
.hero__container .left-col {
width: 68%;
z-index: 2;
}
.hero__container .left-col h1 {
color: white;
margin-bottom: .7em;
}
.hero__container .left-col p {
color: white;
margin-bottom: 2em;
width: 70%;
}
.btn {
text-decoration: none;
color: white;
padding: .7em 0.7em .7em 1em;
border-radius: .8em;
display: -webkit-inline-box;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
}
.btn__gold {
background-color: #f19a33;
}
.button__icon {
width: 1.5em;
height: 1.5em;
fill: currentcolor;
margin-left: 1em;
}
/*Responsive Styles*/
#media only screen and (max-width: 996px) {
header .burger {
display: block;
width: 4em;
cursor: pointer;
}
header .burger img {
width: 3em;
}
header ul {
display: none;
}
}
#media only screen and (max-width: 1022px) {
.overlay {
position: fixed;
z-index: 4;
width: 100%;
height: 100%;
padding: 2em;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: white;
-webkit-transform: translateY(100%);
transform: translateY(100%);
overflow-y: scroll;
}
.overlay .close {
position: absolute;
top: 2em;
right: 2em;
width: 3em;
height: 3em;
cursor: pointer;
}
.overlay img {
width: 10em;
}
.overlay .overlay-list {
list-style-type: none;
text-align: center;
}
.overlay .overlay-list li {
color: black;
font-size: 2rem;
font-family: Josefin Sans;
padding: .6em 0;
}
.overlay .overlay-list li a {
text-decoration: none;
color: black;
}
}
#media only screen and (min-width: 1024px) {
.overlay {
display: none;
}
.hero__container {
height: 70vh;
}
.hero__container::after {
width: 900px;
height: 900px;
z-index: -1;
top: 0;
top: -240px;
right: -120px;
}
}
<div class="overlay">
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="overlay-logo" alt="logo">
</a>
<img src="/images/icon-close.svg" class="close" alt="close">
<ul class="overlay-list">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
</div>
<header>
<a href="">
<img src="images/wrapped_green_logo#2x.png" class="header-logo" alt="logo">
</a>
<nav>
<ul class="header-links">
<li>About us</li>
<li>Menu</li>
<li>Contact</li>
</ul>
<div class="burger">
<img src="images/icon-hamburger.svg" alt="hamburger-icon">
</div>
</nav>
</header>
<div class="hero">
<div class="hero__container">
<div class="left-col">
<h1>Healthy & Fresh Food For You</h1>
<p>Created for lover of healty, delicious and non-obvious food</p>
Check Menu<svg xmlns="http://www.w3.org/2000/svg" class="button__icon" viewBox="0 0 30 24" width="50" height="20"><path fill="none" d="M0 0h24v24H0z"/><path d="M16.172 11l-5.364-5.364 1.414-1.414L20 12l-7.778 7.778-1.414-1.414L16.172 13H4v-2z" fill="rgba(255,255,255,1)"/></svg>
</div>
<div class="food-bg"></div>
</div>
</div>
Similar to Karolaus Answer but i like to use view height more... I just removed the overflow from .hero__container and changed the following stylings (or added #media) to the original code... you can see how much view height you need for mobile (or how much width you consider it as a mobile device)...
.hero__container::after {
content: '';
position: absolute;
width: 100vh;
height: 100vh;
z-index: 0;
top: -20vh;
right: -20vh;
/* [![enter image description here][1]][1] */
background-color: #387546;
background-position: -200vh -200vh;
border-radius: 50%;
}
#media screen and (max-width: 420px){
.hero__container::after{
width:125vh;
height:125vh;
top: -50vh;
right: -50vh;
}
}
Link to Codepen
: https://codepen.io/vattevaii/pen/PobWZzX
I'm trying to create a blog, however, after adding a dropdown menu sourced from W3Schools everything just went messed up. I'm new at HTML and I don't understand why my margins are messed up.
body, html {
height: 100%;
margin: 0;
font-family: 'Roboto';
color: #232323;
background-color: #ffffff;
text-align: center;
}
.bgimg-1{
position: relative;
opacity: 0.8;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
background-image: url("landingpage.jpg");
min-height: 100%;
}
.navbar {
overflow: hidden;
background-color: #333;
}
.navbar a {
float: left;
font-size: 16px;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
.dropdown {
float: left;
overflow: hidden;
}
.dropdown .dropbtn {
font-size: 16px;
border: none;
outline: none;
color: white;
padding: 14px 16px;
background-color: inherit;
font: inherit;
margin: 0;
}
.navbar a:hover, .dropdown:hover .dropbtn {
background-color: #41bc3e;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
width: 100%;
left: 0;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content .header {
background: #41bc3e;
padding: 16px;
color: white;
}
.dropdown:hover .dropdown-content {
display: block;
}
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
.column a {
float: none;
color: black;
padding: 16px;
text-decoration: none;
display: block;
text-align: left;
}
.column a:hover {
background-color: #ddd;
}
.row:after {
content: "";
display: table;
clear: both;
}
#media screen and (max-width: 600px) {
.column {
width: 100%;
height: auto;
}
}
.checked {
color: orange;
}
p {
margin-right: 600px;
margin-left: 600px;
}
.veryveryinterestingh1 {
display: flex;
flex-direction: column;
justify-content: center;
text-align: center;
}
.verycoolheader {
background: #232323;
text-align: center;
}
.caption {
position: absolute;
left: 0;
top: 50%;
width: 100%;
text-align: center;
color: #000;
opacity: 0.99;
}
.caption span.border {
background-color: #111;
color: #41bc3e;
padding: 18px;
font-size: 25px;
letter-spacing: 2px;
opacity: 0.99;
}
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
margin-top: 0;
margin-bottom: 0;
}
ul {
columns: 2;
-webkit-columns: 2;
-moz-columns: 2;
margin-right: 600px;
margin-left: 600px;
}
#media all and (max-width: 768px){
body{
padding-left: 30px !important;
padding-right: 30px !important;
}
}
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font- awesome.min.css" rel="stylesheet"/>
<div class="verycoolheader"> <img src="logo1.png" alt="Website Logo" align="middle">
<div class="navbar">
Home
About Us
<div class="dropdown">
<button class="dropbtn">Blogs
<i class="fa fa-caret-down"></i>
</button>
<div class="dropdown-content">
<div class="header">
<h2>Latest</h2>
</div>
<div class="row">
<div class="column">
<h3>First Blog</h3>
What is Theme?
</div>
<div class="column">
<h3>Second Blog</h3>
Points of View
</div>
<div class="column">
<h3></h3>
</div>
</div>
</div>
</div>
</div>
<div style="position: relative;">
<div class="bgimg-1">
<div class="caption">
<span class="border">Arabian Nights</span>
</div>
</div>
<footer style="color:#ddd;background-color:#232323;text-align:center;padding:50px 80px;text-align: center;">© Copyright 2019 Magdoub & Pejic</footer>
Pastebin:
Landing Page
About Us
Blog 1
you just add box-sizing: border-box; in .column
.column {
float: left;
width: 33.33%;
padding: 10px;
background-color: #ccc;
height: 250px;
}
because you have 10px for each column. The column width is 33.33% + 10px + 10px so it make the margin was mess.
The box-sizing: border-box include padding and border in the element's total width and height so the width will 33.33% both padding-left:10px and padding-right 10px.
I'm new to HTML and CSS, and I'm having issues with my nav bar. I cannot appoint my Navbar on top of the page when scrolling through the sections, and when I finally solve my question, the hover effects inside my sections stop working. Anyone here knows how to fix this ?
Here is my code:
#charset "utf-8";
/* CSS Document */
html{
height:100%;
overflow:hidden;
}
body{
font-family: "Walkway Black";
border:0;
margin:0;
padding:0;
height: 100vh;
display: flex;
flex-direction: column;
overflow: hidden;
overflow-x:hidden;
overflow-y:scroll;
perspective: 1.1px;
}
nav {
float:right;
z-index: 2;
position:fixed;
top:0;
right:90;
}
nav ul {
margin: 0;
padding: 0;
list-style: none;
}
nav li {
display: inline-block;
margin-left:60px; /* distanciamento de cada palavra*/
padding-top: 20px;
position: relative;
}
nav a {
color: #444;
text-decoration: none;
text-transform: uppercase; /*texto em letra maiuscula*/
font-size: 14px;
}
nav a:hover {
color: #000;
}
nav a::before {
content: '';
display: block;
height: 5px;
background-color: #444;
position: absolute;
top: 0;
width: 0%;
transition: all ease-in-out 250ms;
}
nav a:hover::before {
width: 100%;
}
#secao1{
display: flex;
background-image:url(../imagens/intro_cloud.png);
background-position:center;
background-size:cover;
z-index:1;
}
#secao2{
display: flex;
background-image: url(../imagens/image4.png);
background-size: cover;
transform: translateZ(-1px) scale(2);
z-index: 0;
}
#secao3{
display:flex;
background-image: url(../imagens/image2.jpg);
background-size:cover;
z-index:1;
}
.slide{
display: flex;
width:100vw;
height:100vh;
justify-content: center;
position:relative;
padding: 25% 10%;
min-height: 100%;
width: 100%;
box-sizing: border-box;
box-shadow: 0 -1px 10px rgba(0,0,0,.7);
transform-style: inherit;
overflow: auto;
}
#box { /*box*/
position:absolute;
top:20%;
left:15%;
width: 880px;
height: auto;
margin: 15px auto;
display: flex;
margin-bottom: 50px;
box-shadow: rgba(0, 0, 0, 0.7);
}
#box:after { /*efeito box*/
display: flex;
content: '.';
line-height: 0;
visibility: hidden;
}
.estilo {
display: flex;
width: 880px;
list-style: none;
}
.estilo li {
position: relative;
display: flex;
float: left;
width: 400px;
height: 300px;
margin:20px;
cursor: pointer;
}
.estilo li img {
border-radius: 15%;
width: 80%;
height: 80%;
display: flex;
z-index: 999;
position: absolute;
transition:.5s;
border:-2px;
}
.conteudo {
display: flex;
width: 80%;
height: 80px;
background-color:#363739;
border-bottom-left-radius: 50% 50%;
border-bottom-right-radius: 50% 50%;
opacity:.5;
overflow: hidden;
margin-top: 160px;
}
.estilo li:hover img { /*efeito bloco*/
margin-top:-80px;
border-bottom-right-radius:0;
border-bottom-left-radius:0;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Alt</title>
<link href="css/style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<nav>
<ul>
<li>Home</li>
<li>Serviços</li>
<li>Equipe</li>
<li>Orçamento</li>
<li>Contato</li>
</ul>
</nav>
<section id="secao1" class="slide">
</section>
<section id="secao2" class="slide">
<div id="box">
<ul class="estilo">
<li>
<img src="../código/imagens/giphy.gif" alt="">
<div class="conteudo"></div>
</li>
<li>
<img src="../código/imagens/systems.gif" alt="">
<div class="conteudo"></div>
</li>
</ul>
</div>
</section>
<section id="secao3" class="slide"></section>
</body>
</html>
PS.: Hope you understand the problem.