I am making a website. I have a problem now.
This is my website right now. As you can see the blue logo in the middle must be against the top. Does anyone know how I can get it against the top? Does that has to do with the flex-box? If that's the case can I get some explanation about the flexbox? Thanks in advance!
HTML:
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div class="header">
<div class="col-1">
<div id="mainbox" onclick="openFunction()">☰</div>
<div class="nav">
<ul>
<li> <img src="images/minis1.png" class="logo"></li>
</ul>
</div>
<div class="left-text">
<h1><span class="auto-type"></span></h1>
Ontdek meer
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
<script>
var typed = new Typed(".auto-type", {
strings: ["Moed", "Beleid", "Eer", "Trouw", "Trots", "NUNC AUT NUNQUAM"],
typeSpeed: 150,
backSpeed: 150,
loop: false,
});
</script>
</body>
</html>
CSS:
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
.header{
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
}
.col-1{
flex-basis: 100%;
flex-grow: 1;
background-image: url(images/kct.jpg);
background-size: cover;
background-position: center;
color: #fff
}
.logo{
width: 55px;
cursor: pointer;
}
.nav{
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nav ul{
display: flex;
list-style: none;
}
.left-text{
width: 70%;
margin: 230px auto 0;
}
.left-text h1 span{
font-size: 50px;
font-weight: 500;
}
.left-text a img{
width: 60px;
margin-right: 20px;
}
.left-text a{
/* display: flex; */
align-items: center;
text-decoration: none;
margin: 30px 0 30px;
display: inline-block;
background: transparent;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
padding: 15px 50px;
border-radius: 30px;
border: 4px solid #fff; /*922125*/
}
.left-text a:hover{
background: #fff;
color: #333
}
#mainbox{
font-size: 35px;
}
The problem is that #mainbox takes the whole width and .nav goes down. One solution would be to make .nav position absolute and top 0.
*{
margin: 0;
padding: 0;
font-family: 'Poppins', sans-serif;
box-sizing: border-box;
}
.header{
width: 100%;
min-height: 100vh;
display: flex;
flex-wrap: wrap;
}
.col-1{
flex-basis: 100%;
flex-grow: 1;
background-image: url(images/kct.jpg);
background-size: cover;
background-position: center;
color: #fff
}
.logo{
width: 55px;
cursor: pointer;
}
.nav{
position:absolute;
top:0;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
}
.nav ul{
display: flex;
list-style: none;
}
.left-text{
width: 70%;
margin: 230px auto 0;
}
.left-text h1 span{
font-size: 50px;
font-weight: 500;
}
.left-text a img{
width: 60px;
margin-right: 20px;
}
.left-text a{
/* display: flex; */
align-items: center;
text-decoration: none;
margin: 30px 0 30px;
display: inline-block;
background: transparent;
color: #fff;
font-weight: 300;
letter-spacing: 1px;
padding: 15px 50px;
border-radius: 30px;
border: 4px solid #fff; /*922125*/
}
.left-text a:hover{
background: #fff;
color: #333
}
#mainbox{
font-size: 35px;
}
<html>
<head>
<meta name="viewport" content="width=Ddevice-width, initial-scale=1.0">
<title>Korps Commandotroepen</title>
<link rel="stylesheet" href="index2.css">
</head>
<body>
<div class="header">
<div class="col-1">
<div id="mainbox" onclick="openFunction()">☰</div>
<div class="nav">
<ul>
<li> <img src="images/minis1.png" class="logo"></li>
</ul>
</div>
<div class="left-text">
<h1><span class="auto-type"></span></h1>
Ontdek meer
</div>
</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/typed.js#2.0.12"></script>
<script>
var typed = new Typed(".auto-type", {
strings: ["Moed", "Beleid", "Eer", "Trouw", "Trots", "NUNC AUT NUNQUAM"],
typeSpeed: 150,
backSpeed: 150,
loop: false,
});
</script>
</body>
</html>
Related
I have a header that works perfectly fine in its own html file and I have a product details page that also is fine on its own. When I add the header to the product page it messes up entirely and pushes the header out of the way, placing part of the product details to the right of the header.
I tried using inspect element and found no padding or magins that would be doing this and adding a margin or padding does not fix the issue.
I assume it's a problem with the product page as inspect element does highlight that section of the page when I was troubleshooting.
Any help would be amazing!
some of the product html (https://i.stack.imgur.com/tsGDT.png)](https://i.stack.imgur.com/tsGDT.png)
PRODUCT HTML:
#import url(https://fonts.googleapis.com/css2?family=Rubik:wght#100;200;300;400;500;600;800;900&display=swap);
* {
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.small-container{
max-width: 1000%;
margin: auto;
padding-left: 25px;
padding-right: 20px;
}
.row{
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product{
margin-top: 80px;
}
.small-img-row{
display: flex;
justify-content: space-around;
max-width: 300px;
max-height: 500px;
}
.col-2 img {
max-width: 100%;
/* padding: 0px 0; */
max-width: 300px;
max-height: 500px;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2{
padding: 20;
}
.col-2{
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1{
font-size: 50px;
line-height: 60px;
margin: 5px 0;
}
.single-product select{
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4{
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
a{
text-decoration: none;
}
p{
color: #9ba0a3;
margin-top: 10px;
}
.btn{
display: inline-block;
background: #4B7AB4;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #314f74;
}
.header{
width: 100%;
height: 80px;
display: block;
/* background-color: #101010; */
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background-nav.png);
background-size: cover;
}
.inner-header{
width: 1000px;
height: 100%;
display: block;
margin: 0 auto;
/* background-color: red; */
}
.logo-container{
height: 100%;
display: table;
float: left;
}
.logo-container img{
max-width: 60px;
max-height: 60px;
display: table-cell;
padding: 10px;
vertical-align: middle;
}
.navigation{
float: right;
height: 100%;
}
.navigation a{
height: 100%;
display: table;
float: left;
padding: 0px 20px;
}
.navigation a li{
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family:'Rubik';
font-size: 16px;
}
.gibsonrating {
list-style: none;
display: flex;
justify-content: left;
align-items: center;
padding-top: 0;
}
li {
padding-top: 5px;
}
.fa {
font-size: 10px;
margin: 1px;
color: #939a9e;
}
.checked {
color: #ff9f43;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta charset="utf-8" />
<title>fret - Guitars for the People!</title>
<link rel="stylesheet" type="text/css" href="./gibson.css" />
<link href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css"
rel="stylesheet" type='text/css'>
</head>
<body>
<div class="header">
<div class="inner-header">
<div class="logo-container">
<img src="fretlogo.png"/>
</div>
<ul class="navigation">
<li>Home</li>
<li>Products</li>
<li>About</li>
<li>Login</li>
</ul>
</div>
</div>
<div class="smallcontainer" single-product>
<div class="row">
<div class="col-2">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180483.jpg" width="100%"
id="ProductImg">
<div class="small-img-row">
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180543.jpg" width="100%"
class="small-img">
</div>
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180503.jpg" width="100%"
class="small-img">
</div>
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180483.jpg" width="100%"
class="small-img">
</div>
<div class="small-img-col">
<img src="https://bdbo2.thomann.de/thumb/bdb3000/pics/bdbo/17180534.jpg" width="100%"
class="small-img">
</div>
</div>
</div>
<div class="col-2">
<p>Home / Gibson G-200</p>
<h1>Gibson G-200</h1>
<h4>€1,990</h4>
<select>
<option>Select Quantity</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5+</option>
</select>
<ul class="gibsonrating">
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star checked"></i></li>
<li><i class="fa fa-star-half-o checked"></i></li>
</ul>
Add to Cart
<h3>Product Details</h3>
<br>
<p>
<ul>
<li>Body Shape: J-200 with cutaway</li>
<li>Top: solid Sitka spruce</li>
<li>Neck: utile</li>
<li>Profile: advanced response</li>
<li>Dovetail neck construction</li>
<li>Fretboard: striped ebony</li>
<li>Fretboard inlays: G-collection single bars</li>
<li>Nut width 43,80 mm (1,725")</li>
<li>Scale: 648 mm (25,5")</li>
<li>Made in Bozeman, USA</li>
</ul>
</p>
</div>
</div>
</div>
</body>
</html>
PRODUCT CSS:
product page on its own (https://i.stack.imgur.com/Vnd9J.png)](https://i.stack.imgur.com/Vnd9J.png)
header on its own (https://i.stack.imgur.com/eQE3g.png)](https://i.stack.imgur.com/eQE3g.png)
the mix of both the header and the product details (https://i.stack.imgur.com/9y2t1.png)](https://i.stack.imgur.com/9y2t1.png)
I tried looking for disruptive padding and margins
I tried adding padding and margins to the smallcontainer and row in css
If your header and your product page are wrapped into a .row, the behavior is pretty normal (a row is made to manage its child vertically).
https://getbootstrap.com/docs/4.0/layout/grid/#vertical-alignment
You should remove it or change it to a .col.
.col{
display:flex;
flex-flow:column;
}
I believe you might have a float problem. You are using floats but I don't see and clearfixes for them. This could create such behaviour.
In general I recommend using float only to wrap text around another element and otherwise get rid of it. You should use flexbox more often.
As I couldn't reconstruct your problem with the code given I just removed the float:
full codepen here
adapted css:
* {
margin: 0;
padding: 0;
font-family: 'Rubik', sans-serif;
box-sizing: border-box;
}
html {
scroll-behavior: smooth;
}
.small-container{
max-width: 1000%;
margin: auto;
padding-left: 25px;
padding-right: 20px;
}
.row {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: space-around;
}
.single-product {
margin-top: 80px;
}
.small-img-row {
display: flex;
justify-content: space-around;
max-width: 300px;
max-height: 500px;
}
.col-2 img {
max-width: 100%;
/* padding: 0px 0; */
max-width: 300px;
max-height: 500px;
}
.small-img-col{
flex-basis: 24%;
cursor: pointer;
}
.single-product .col-2 img{
padding: 0;
}
.single-product .col-2 {
/* CAREFUL: was 20 only! if it's not 0, don't forget to add a unit! */
padding: 20px;
}
.col-2 {
flex-basis: 50%;
min-width: 300px;
}
.col-2 h1 {
font-size: 50px;
line-height: 60px;
margin: 5px 0;
}
.single-product select {
display: block;
padding: 10px;
margin-top: 20px;
}
.single-product h4 {
margin: 20px 0;
font-size: 22px;
font-weight: bold;
}
a {
text-decoration: none;
}
p {
color: #9ba0a3;
margin-top: 10px;
}
.btn {
display: inline-block;
background: #4B7AB4;
color: #fff;
padding: 8px 30px;
margin: 30px 0;
border-radius: 30px;
transition: background 0.5s;
}
.btn:hover{
background: #314f74;
}
.header {
display: block;
width: 100%;
height: 80px;
/* background-color: #101010; */
background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.75)), url(background-nav.png);
background-size: cover;
}
.inner-header {
display: flex; /*changed*/
justify-content: space-between;
align-items: center;
width: 1000px;
height: 100%;
margin: 0 auto;
/* background-color: red; */
}
/*changed*/
.logo-container {
display: flex;
justify-content: center;
align-items: center;
}
.logo-container img {
max-width: 60px;
max-height: 60px;
/* display: table-cell;
padding: 10px;
vertical-align: middle; */
}
/*changed*/
.navigation {
display: flex;
height: 100%;
/* float: right; */
}
/*changed*/
.navigation a {
height: 100%;
display: table;
/* float: left; */
/* padding: 0px 20px; */
}
/*added*/
.navigation a + a {
margin-left: 20px;
}
.navigation a li {
display: table-cell;
vertical-align: middle;
height: 100%;
color: white;
font-family:'Rubik';
font-size: 16px;
}
.gibsonrating {
list-style: none;
display: flex;
justify-content: left;
align-items: center;
padding-top: 0;
}
li {
padding-top: 5px;
}
.fa {
font-size: 10px;
margin: 1px;
color: #939a9e;
}
.checked {
color: #ff9f43;
}
I marked the changed parts with a comment. You also had an other error, a missing unit for a padding.
If your problem is not fixed with this check out JohnSs answer as you might have a container around it with display: flex; and as he stated the incorrect flex-direction.
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>
I am practicing my layout but I'm facing a problem with my layout. I'm a beginner with flex and grid CSS. As you can see in the picture the horizontal scrollbar shows when the screen width is 1440 or above. I don't want to show that. I also tried the overflow-x: hidden but it always shows. How can I fix that? Thanks so much!
This is my code:
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#100;300;400;500;600;800&display=swap");
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.5;
color: #262626;
}
a {
text-decoration: none;
color: #262626;
}
ul,
li,
ol {
list-style: none;
margin: 0;
padding: 0;
}
.btn {
width: 105px;
cursor: pointer;
height: 36px;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 36px;
border-radius: 20px;
text-transform: uppercase;
border: none;
}
.btn-none {
color: #037cff;
background: #fff;
}
.btn-primary {
color: #fff;
background: #037cff;
}
.btn-secondary {
color: #037cff;
background: #e6f2ff;
}
.section-title {
font-size: 32px;
}
.main-container {
position: relative;
width: 100%;
height: 100%;
max-width: 1200px;
margin: 0 auto;
align-items: center;
padding: 0 20px;
}
.main-container .nav-section {
position: absolute;
top: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding: 20px 0;
}
.main-container .nav-section .logo-container h2 {
font-size: 20px;
color: #007cff;
width: 128px;
margin: 0;
cursor: pointer;
}
.main-container .nav-section ul.menu-container {
display: flex;
}
.main-container .nav-section ul li {
padding: 0 10px;
}
.main-container .nav-section ul li a {
font-size: 14px;
}
.main-container .nav-section .btn-container {
display: flex;
align-items: center;
justify-content: flex-start;
}
.main-container .hero-container {
width: 100%;
display: grid;
height: calc(100vh - 80px);
grid-template-columns: repeat(2, 1fr);
padding-top: 100px;
column-gap: 12px;
align-items: center;
margin-bottom: 50px;
}
.main-container .hero-container .hero-text-container {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 580px;
}
.main-container .hero-container .hero-text-container h1 {
font-size: 48px;
font-weight: 800;
margin: 0;
}
.main-container .hero-container .hero-text-container h1 span {
color: #007cff;
}
.main-container .hero-container .hero-text-container p:last-child {
font-size: 16px;
font-weight: 400;
}
.main-container .hero-container .hero-image-container img {
max-width: 580px;
max-height: 560px;
height: auto;
width: 100%;
vertical-align: bottom;
margin-top: 25px;
}
.main-container .hero-container button {
width: 300px;
border-radius: 8px;
height: 55px;
margin-bottom: 100px;
}
<!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>Gadget Store</title>
</head>
<body>
<div class="main-container">
<!-- Nav Section -->
<nav class="nav-section">
<div class="logo-container">
<h2>Gadget <span>Zone</span></h2>
</div>
<ul class="menu-container">
<li>Home</li>
<li>Reviews</li>
<li>Deals</li>
<li>Gears</li>
<li>Gaming</li>
<li>Entertainment</li>
</ul>
<div class="btn-container">
<button class="btn btn-none">Sign In</button>
<button class="btn btn-primary btn-rad">Login</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-container">
<div class="hero-text-container">
<h1>
Best way to <br />
find your <span>gadget</span> needs.
</h1>
<p>
Find the latest technology news and expert tech product reviews.
<br />
Learn about the latest gadgets and consumer tech products for
entertainment, gaming, lifestyle and more.
</p>
<p>All gadgets are priced to be customer-friendly.</p>
</div>
<div class="hero-image-container">
<img src="https://svgshare.com/i/b9d.svg" alt="Hero" />
</div>
<button class="btn btn-secondary">Learn more</button>
</section>
<!-- Reviews Section -->
<section class="reviews-section">
<h1 class="section-title">Latest Reviews</h1>
</section>
</div>
</body>
</html>
Hiding overflow isn't usually a solution--it just masks problems. The best approach in cases like this is often to start removing widths from things. You're forcing some that don't help.
Here, set the left value of your navbar so it's in frame. You may need to add padding to move the logo and button over.
Then, remove the width rule from the main container element.
#import url("https://fonts.googleapis.com/css2?family=Inter:wght#100;300;400;500;600;800&display=swap");
html,
body {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Inter", sans-serif;
font-weight: 300;
font-size: 15px;
line-height: 1.5;
color: #262626;
}
a {
text-decoration: none;
color: #262626;
}
ul,
li,
ol {
list-style: none;
margin: 0;
padding: 0;
}
.btn {
width: 105px;
cursor: pointer;
height: 36px;
font-size: 16px;
font-weight: 700;
text-align: center;
line-height: 36px;
border-radius: 20px;
text-transform: uppercase;
border: none;
}
.btn-none {
color: #037cff;
background: #fff;
}
.btn-primary {
color: #fff;
background: #037cff;
}
.btn-secondary {
color: #037cff;
background: #e6f2ff;
}
.section-title {
font-size: 32px;
}
.main-container {
position: relative;
height: 100%;
max-width: 1200px;
margin: 0 auto;
align-items: center;
padding: 0 20px;
}
.main-container .nav-section {
position: absolute;
left: 0; /* <----------------------------------------- HERE */
top: 0;
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
height: 60px;
padding: 20px 0;
}
.main-container .nav-section .logo-container h2 {
font-size: 20px;
color: #007cff;
width: 128px;
margin: 0;
cursor: pointer;
}
.main-container .nav-section ul.menu-container {
display: flex;
}
.main-container .nav-section ul li {
padding: 0 10px;
}
.main-container .nav-section ul li a {
font-size: 14px;
}
.main-container .nav-section .btn-container {
display: flex;
align-items: center;
justify-content: flex-start;
}
.main-container .hero-container {
display: grid;
height: calc(100vh - 80px);
grid-template-columns: repeat(2, 1fr);
padding-top: 100px;
column-gap: 12px;
align-items: center;
margin-bottom: 50px;
}
.main-container .hero-container .hero-text-container {
display: flex;
flex-direction: column;
justify-content: center;
max-width: 580px;
}
.main-container .hero-container .hero-text-container h1 {
font-size: 48px;
font-weight: 800;
margin: 0;
}
.main-container .hero-container .hero-text-container h1 span {
color: #007cff;
}
.main-container .hero-container .hero-text-container p:last-child {
font-size: 16px;
font-weight: 400;
}
.main-container .hero-container .hero-image-container img {
max-width: 580px;
max-height: 560px;
height: auto;
width: 100%;
vertical-align: bottom;
margin-top: 25px;
}
.main-container .hero-container button {
width: 300px;
border-radius: 8px;
height: 55px;
margin-bottom: 100px;
}
<div class="main-container">
<!-- Nav Section -->
<nav class="nav-section">
<div class="logo-container">
<h2>Gadget <span>Zone</span></h2>
</div>
<ul class="menu-container">
<li>Home</li>
<li>Reviews</li>
<li>Deals</li>
<li>Gears</li>
<li>Gaming</li>
<li>Entertainment</li>
</ul>
<div class="btn-container">
<button class="btn btn-none">Sign In</button>
<button class="btn btn-primary btn-rad">Login</button>
</div>
</nav>
<!-- Hero Section -->
<section class="hero-container">
<div class="hero-text-container">
<h1>
Best way to <br />
find your <span>gadget</span> needs.
</h1>
<p>
Find the latest technology news and expert tech product reviews.
<br />
Learn about the latest gadgets and consumer tech products for
entertainment, gaming, lifestyle and more.
</p>
<p>All gadgets are priced to be customer-friendly.</p>
</div>
<div class="hero-image-container">
<img src="https://svgshare.com/i/b9d.svg" alt="Hero" />
</div>
<button class="btn btn-secondary">Learn more</button>
</section>
<!-- Reviews Section -->
<section class="reviews-section">
<h1 class="section-title">Latest Reviews</h1>
</section>
</div>
I have this site and i use html and css,and i want to do a project and my own portfolio, and one of the sections on the site is "about" and in this section there should be writing and an image next to the writing, as is it's clear in the first picture.
as it is clear in the first picture, there is a picture and next to it thereis a special writing for the "about" section.
in the second picture, there is the main problem of this post, as i could not put the picture and writing next to each other.
index.html:
<html DOCTYPE="html5">
<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>Training with navbar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/all.min.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<p>Portfolio</p>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<label class="check">
<i class="fas fa-bars fa-lg icon" id="menu"></i>
</label>
</nav>
<div class="header-content">
<h2>Welcome to Portfolio</h2>
<p>Let's chat</p>
<div class="btn">
<button class="btn-1">Book Now</button>
</div>
</div>
</header>
<section class="about">
<div class="row">
<div class="about-text">
<img src="images/women%20image.jpeg" class="personal-img" alt="about me picture">
<h2>About</h2>
<p>I am Hiba Youssef, I am studying <br>Information Technology Engineering <br>at Damascus university.
I have three years experience in React.
</p>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
css.style:
#import url('https://fonts.googleapis.com/css2?family=Tangerine:wght#700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--spacing: 10px;
--primary: #141414;
--secondary: #b80003;
--third: #ffffff;
font-size: 12px;
}
/*img{*/
/* width: 100%;*/
/* margin: auto;*/
/*}*/
.row {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
body {
background-color: var(--primary);
}
header {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/mountain.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
nav {
background-color: var(--primary);
display: flex;
justify-content: space-between;
padding: calc(2 * var(--spacing)) calc(8 * var(--spacing));
position: sticky;
top: 0;
z-index: 1;
}
.logo p {
font-family: 'Tangerine', cursive;
font-size: 4.8rem;
font-weight: bold;
color: var(--secondary);
}
nav ul li {
padding-top: calc(1.5 * var(--spacing));
display: inline-block;
}
nav ul li a {
color: var(--third);
font-size: 1.2rem;
font-weight: 400;
/*padding:calc(1.5*var(--spacing)) 0 0 calc(3.6*var(--spacing));*/
padding: 0 calc(var(--spacing));
text-transform: uppercase;
letter-spacing: 1.5px;
}
nav ul li a:hover {
color: var(--secondary);
}
.icon {
padding-top: calc(1.5 * var(--spacing));
color: var(--third);
cursor: pointer;
}
.check {
display: none;
}
#media only screen and (max-width: 768px) {
html {
font-size: 8px;
}
nav {
/*padding: 0 50px;*/
flex-direction: column;
position: relative;
}
.check {
display: block;
position: absolute;
top: calc(2 * var(--spacing));
right: calc(4 * var(--spacing));
}
nav ul {
width: 100%;
height: 100vh;
background-color: ghostwhite;
display: none;
position: fixed;
}
.showmenu {
display: block;
}
nav ul li {
display: block;
padding: calc(2 * var(--spacing));
}
nav ul li a {
color: black;
}
}
.header-content {
text-align: center;
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/
position: relative;
top: calc(15 * var(--spacing));
}
.header-content h2 {
font-size: 4rem;
color: var(--third);
margin: calc(1.3 * var(--spacing));
}
.header-content p {
font-size: 1.8rem;
color: var(--third);
font-weight: 500;
}
.btn {
/*display: flex;*/
/*justify-content: space-evenly;*/
/*flex-direction: row;*/
align-items: center;
text-align: center;
margin: calc(2 * var(--spacing));
}
.btn-1 {
background-color: var(--secondary);
color: var(--third);
padding: calc(var(--spacing)) calc(2 * var(--spacing));
border: none;
letter-spacing: 1px;
outline: none;
border-radius: 1.5px;
}
.about-space{
/*display: inline-block;*/
}
.about {
margin: calc(6*var(--spacing));
display: flex;
align-items: center;
justify-content: center;
}
.about-text {
padding: calc(6*var(--spacing)) calc(6*var(--spacing));
background-color: var(--secondary);
}
.about-text h2{
padding: calc(2*var(--spacing)) 0;
font-size: 2.4rem;
color: var(--third);
}
.about-text p{
font-size: 1.3rem;
color: var(--third);
}
.about-text img{
object-fit: contain;
display: inline-block;
width: calc(48*var(--spacing));
height: calc(44*var(--spacing));
/*position: absolute;*/
}
.personal-img{
display: flex;
position: relative;
left: 70%;
object-fit: contain;
}
Make the about-text position property relative and make the image position property absolute for it to work:
#import url('https://fonts.googleapis.com/css2?family=Tangerine:wght#700&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
--spacing: 10px;
--primary: #141414;
--secondary: #b80003;
--third: #ffffff;
font-size: 12px;
}
/*img{*/
/* width: 100%;*/
/* margin: auto;*/
/*}*/
.row {
display: flex;
flex-direction: column;
align-items: center;
margin: auto;
}
a {
text-decoration: none;
}
ul {
list-style: none;
}
body {
background-color: var(--primary);
}
header {
height: 100vh;
background: linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)), url('images/mountain.jpg');
background-size: cover;
background-repeat: no-repeat;
background-position: center;
}
nav {
background-color: var(--primary);
display: flex;
justify-content: space-between;
padding: calc(2 * var(--spacing)) calc(8 * var(--spacing));
position: sticky;
top: 0;
z-index: 1;
}
.logo p {
font-family: 'Tangerine', cursive;
font-size: 4.8rem;
font-weight: bold;
color: var(--secondary);
}
nav ul li {
padding-top: calc(1.5 * var(--spacing));
display: inline-block;
}
nav ul li a {
color: var(--third);
font-size: 1.2rem;
font-weight: 400;
/*padding:calc(1.5*var(--spacing)) 0 0 calc(3.6*var(--spacing));*/
padding: 0 calc(var(--spacing));
text-transform: uppercase;
letter-spacing: 1.5px;
}
nav ul li a:hover {
color: var(--secondary);
}
.icon {
padding-top: calc(1.5 * var(--spacing));
color: var(--third);
cursor: pointer;
}
.check {
display: none;
}
#media only screen and (max-width: 768px) {
html {
font-size: 8px;
}
nav {
/*padding: 0 50px;*/
flex-direction: column;
position: relative;
}
.check {
display: block;
position: absolute;
top: calc(2 * var(--spacing));
right: calc(4 * var(--spacing));
}
nav ul {
width: 100%;
height: 100vh;
background-color: ghostwhite;
display: none;
position: fixed;
}
.showmenu {
display: block;
}
nav ul li {
display: block;
padding: calc(2 * var(--spacing));
}
nav ul li a {
color: black;
}
}
.header-content {
text-align: center;
/*display: flex;*/
/*justify-content: center;*/
/*align-items: center;*/
position: relative;
top: calc(15 * var(--spacing));
}
.header-content h2 {
font-size: 4rem;
color: var(--third);
margin: calc(1.3 * var(--spacing));
}
.header-content p {
font-size: 1.8rem;
color: var(--third);
font-weight: 500;
}
.btn {
/*display: flex;*/
/*justify-content: space-evenly;*/
/*flex-direction: row;*/
align-items: center;
text-align: center;
margin: calc(2 * var(--spacing));
}
.btn-1 {
background-color: var(--secondary);
color: var(--third);
padding: calc(var(--spacing)) calc(2 * var(--spacing));
border: none;
letter-spacing: 1px;
outline: none;
border-radius: 1.5px;
}
.about-space {
/*display: inline-block;*/
}
.about {
margin: calc(6*var(--spacing));
display: flex;
align-items: center;
justify-content: center;
}
.about-text {
position: relative;
padding: calc(6*var(--spacing)) calc(6*var(--spacing));
background-color: var(--secondary);
}
.about-text h2 {
padding: calc(2*var(--spacing)) 0;
font-size: 2.4rem;
color: var(--third);
}
.about-text p {
font-size: 1.3rem;
color: var(--third);
}
.about-text img {
object-fit: contain;
display: inline-block;
width: calc(48*var(--spacing));
height: calc(44*var(--spacing));
/*position: absolute;*/
}
.personal-img {
display: flex;
position: absolute;
left: 70%;
object-fit: contain;
}
<html DOCTYPE="html5">
<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>Training with navbar</title>
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="css/all.min.css">
</head>
<body>
<header>
<nav>
<div class="logo">
<p>Portfolio</p>
</div>
<ul>
<li>Home</li>
<li>About</li>
<li>Services</li>
<li>Contact</li>
</ul>
<label class="check">
<i class="fas fa-bars fa-lg icon" id="menu"></i>
</label>
</nav>
<div class="header-content">
<h2>Welcome to Portfolio</h2>
<p>Let's chat</p>
<div class="btn">
<button class="btn-1">Book Now</button>
</div>
</div>
</header>
<section class="about">
<div class="row">
<div class="about-text">
<img src="https://wallpaperaccess.com/full/1376490.jpg" class="personal-img" alt="about me picture">
<h2>About</h2>
<p>I am Hiba Youssef, I am studying <br>Information Technology Engineering <br>at Damascus university. I have three years experience in React.
</p>
</div>
</div>
</section>
<script src="app.js"></script>
</body>
</html>
Basically, what happens is when you put an element with absolute positioning inside an element with relative positioning, the inner element will position itself relative to the outer element.
I used a pseudo element, :before, to help with my fixed background image because if not, it would cause my website to scroll slow due to the background-attachment repaint function. I fixed the background image to run smoothly, but now the background image is overflowing throughout the whole document and not staying in the div.
I have tried to use different overflow options and tried putting the hero class that controls the pseudo element on different elements to see if that would help.
https://jsfiddle.net/4prhubwy/
html:
<!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">
<title>Ukiyo Sushi ツ</title>
<link href = "/style.css" type = "text/css" rel = "stylesheet">
<link href="https://fonts.googleapis.com/css?family=Fira+Sans&display=swap" rel="stylesheet">
</head>
<body>
<div class = "hero">
<header>
<nav class = "navbar">
Ukiyo Sushi ツ
<ul>
<li>About us</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class = "sushiPlatter">
<h2>Chef's Special Sushi Platter</h2>
<br>
View Menu
</div>
</header>
</div>
<section class = "idkYet">
<div>
<span>hello</span>
</div>
</section>
</body>
</html>
css:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
a{
text-decoration: none;
color: white;
/*overflow: hidden;*/
}
.hero{
position: relative;
overflow: hidden;
min-height: 100%;
}
.hero::before{
background-image: url("/img/header.jpg");
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
body{
font-family: "Fira Sans", sans-serif;
font-size: 2rem;
color: white;
}
.logo{
font-size: 3rem;
margin: .5em;
border-bottom: 2px solid transparent;
}
.logo:hover{
border-bottom: 2px solid white;
}
.navbar{
/*position: fixed;*/
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.navbar ul{
display: inline-flex;
list-style: none;
margin-left: auto;
}
.navbar li{
margin: 1.15em;
border-bottom: 2px solid transparent;
}
.about:hover, .menu:hover, .services:hover, .contact:hover{
border-bottom: 2px solid white;
}
.sushiPlatter{
font-size: 1rem;
text-align: left;
display: flex;
height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 2.15em 2em;
}
.sushiPlatter h2{
font-weight: bold;
}
.sushiPlatter a{
margin: 0em 7em;
}
.sushiPlatter a:hover{
opacity: .25;
transition: 1s;
}
section{
height: 100vh;
color: black;
}
.idkYet{
color: white;
display: block;
}
add a background to the rest of the element so it hides the pseudo while scrolling on top of it, section for instance here :
example
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
/* selector moved here to be seen */
section {
height: 100vh;
color: black;
background: white;/* rule added , use your own color or img */
}
/* end selector moved */
a {
text-decoration: none;
color: white;
/*overflow: hidden;*/
}
.hero {
position: relative;
overflow: hidden;
min-height: 100%;
}
.hero::before {
background-image: url(https://i.imgur.com/bs8H4p7.jpg);
background-repeat: no-repeat;
background-position: center top;
background-size: cover;
content: '';
height: 100%;
position: fixed;
left: 0;
top: 0;
width: 100%;
will-change: transform;
z-index: -1;
}
body {
font-family: "Fira Sans", sans-serif;
font-size: 2rem;
color: white;
}
.logo {
font-size: 3rem;
margin: .5em;
border-bottom: 2px solid transparent;
}
.logo:hover {
border-bottom: 2px solid white;
}
.navbar {
/*position: fixed;*/
display: flex;
flex-direction: row;
justify-content: flex-start;
}
.navbar ul {
display: inline-flex;
list-style: none;
margin-left: auto;
}
.navbar li {
margin: 1.15em;
border-bottom: 2px solid transparent;
}
.about:hover,
.menu:hover,
.services:hover,
.contact:hover {
border-bottom: 2px solid white;
}
.sushiPlatter {
font-size: 1rem;
text-align: left;
display: flex;
height: 100vh;
flex-direction: column;
align-items: flex-start;
justify-content: center;
margin: 2.15em 2em;
}
.sushiPlatter h2 {
font-weight: bold;
}
.sushiPlatter a {
margin: 0em 7em;
}
.sushiPlatter a:hover {
opacity: .25;
transition: 1s;
}
.idkYet {
color: white;
display: block;
}
<div class="hero">
<header>
<nav class="navbar">
Ukiyo Sushi ツ
<ul>
<li>About us</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</nav>
<div class="sushiPlatter">
<h2>Chef's Special Sushi Platter</h2>
<br>
View Menu
</div>
</header>
</div>
<section class="idkYet">
<div>
<span>hello</span>
</div>
</section>