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>
Related
I am currently trying to make a website. However, the problem that I am getting is that when I minimize the browser, Yes, it is being responsive, but the text is going over the other components on the website and I am unsure how to work around this issue as I am quite stumped at this error.
Image for more clarification:
Web error
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- font awesome cdn link -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css">
<link rel="stylesheet" href="https://unpkg.com/swiper#7/swiper-bundle.min.css" />
<link rel="stylesheet" href="jason.css">
</head>
<body>
<nav>
<div class="logo">Revolutionary Fitness</div>
<ul>
<div class="items">
<li>Home</li>
<li>Classes</li>
<li>Products</li>
<li>Login</li>
<li>Feedback</li>
</div>
</ul>
</nav>
<div class="background">
<div class="overlay">
<h3>Classes</h3>
<p>Insert Something Here...</p>
</div>
</div>
<div class="main">
<h1>Classes, coaches and community</h1>
<div class="main text">
<p>At Virgin Active, we do health and fitness differently. We have expertly crafted exercise experiences
that are the perfect blend of intelligent programming and feel-good movement. We've got everything from
Yoga to HIIT, so you can move your body any
way you want.
</p>
</div>
</div>
<section class="no.1" id="no.1">
<div class="section">
<img src="Yoga.jpg" alt="Yoga">
<div class="ClassText">
<h1>Yoga</h1>
<p>
Choose from Classes with dynamism,energy and athleticism, to an authentic and peaceful experience.
<br><br>
Classes include: Align,Flow and Calm SkyPark Yoga
<br><br>
Sign Up<span> to book this class</span>
</p>
</div>
</div>
</section>
<footer class="footer">
<div class="social">
<i class="fab fa-facebook-f"></i>
<i class="fab fa-whatsapp"></i>
<i class="fab fa-twitter"></i>
<i class="fab fa-instagram"></i>
</div>
<ul class="list">
<li>About Us</li>
<li>Contact Us</li>
<li>FAQs</li>
</ul>
<p class="copyright">
<small>©2022 Revolutionary Fitness</small>
</p>
</footer>
</body>
</html>
Css:
#import url("https://fonts.googleapis.com/css2?family=Nunito:wght#200;300;400;600&display=swap");
* {
font-family: 'Nunito', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
}
nav {
background: #1b1b1b;
}
nav:after {
content: '';
clear: both;
display: table;
}
nav .logo {
float: left;
color: white;
font-size: 27px;
line-height: 70px;
padding-left: 60px;
}
nav ul {
display: flex;
justify-content: center;
align-items: center;
list-style: none;
float: right;
margin-right: 40px;
}
nav ul li {
display: inline-block;
background: #1b1b1b;
margin: 0 5px;
}
nav ul li a {
color: white;
text-decoration: none;
line-height: 70px;
font-size: 18px;
padding: 8px 15px;
}
nav ul li a:hover {
color: cyan;
}
nav ul ul li a:hover {
color: cyan;
box-shadow: none;
}
nav ul ul {
position: absolute;
top: 90px;
opacity: 0;
visibility: hidden;
transition: top .3s;
}
.background {
background-color: #212529;
width: 100%;
height: 200px;
position: relative;
/* USE FLEXBOX */
display: flex;
align-items: center;
justify-content: flex-start;
/* ADD SOME PADDING FOR BETTER UI */
padding-inline: 16px; /* LEFT and Right */
}
.overlay {
height: 100%;
color: white;
display: flex;
justify-content: center;
flex-direction: column;
align-items: center;
position: relative;
}
.overlay h3 {
margin-bottom: 20px;
color: crimson;
font-size: 20px;
}
.overlay p {
font-size: 35px;
}
.main h1 {
display: flex;
text-align: center;
justify-content: center;
margin-top: 20px;
font-size: 50px;
}
.text {
width: 50%;
height: 50px;
padding-top: 20px;
white-space: initial;
margin: 0 auto;
word-wrap: break-word;
}
body {
margin: 0;
font-family: sans-serif;
}
.section {
background-color: #F5F5F5;
display: flex;
justify-content: space-between;
padding: 40px;
width: 80%;
margin-top: 50px;
float: left;
}
.section img {
height: 250px;
}
.section h1 {
margin-left: 100px;
color: black;
}
.section p {
margin-left: 100px;
width: 55%;
height: 50px;
white-space: initial;
margin-left: 100px;
margin-top: 20px;
word-wrap: break-word;
}
.footer {
background-color: #000;
padding: 40px;
clear: both;
}
.footer .social {
text-align: center;
padding-bottom: 25px;
color: #4b4c4d;
}
.footer .social a {
display: inline-block;
height: 40px;
width: 40px;
background: #424242;
margin: 0 10px 10px 0;
text-align: center;
line-height: 40px;
border-radius: 50%;
color: #ffffff;
transition: all 0.5s ease;
}
.footer .social a:hover {
color: #24262b;
background-color: #ffffff;
}
.footer ul {
margin-top: 0;
padding: 0;
list-style: none;
font-size: 18px;
line-height: 1.6;
margin-bottom: 0;
text-align: center;
}
.footer ul li a {
color: #fff;
text-decoration: none;
}
.footer ul li {
display: inline-block;
padding: 0 15px;
}
.footer .copyright {
margin-top: 15px;
text-align: center;
font-size: 20px;
color: #fff;
}
you can use css media query create responsive web page.
#media only screen and (min-width: 768px) {
.overlay h3 {
font-size: 16px;
}
.overlay p {
font-size: 25px;
}
}
#media only screen and (min-width: 1200px) {
.overlay h3 {
font-size: 22px;
}
.overlay p {
font-size: 40px;
}
}
Another way that is not recommended using viewport width and height
.overlay p {
font-size: 1.5vw;
}
I am doing a simple homepage with only HTML and CSS, and I have a problem that it shows too much space underneath that is not coming from any of the divs that I tested.
What could be causing it?
I tried to remove the negative top position and add a displa:flex to the main container but it did not help either.
Here is my code snippet:
#font-face {
font-family: 'open-sans';
src: url('/font/opensans-variablefont_wdthwght-webfont.woff2') format('woff2'),
url('/font/opensans-variablefont_wdthwght-webfont.woff') format('woff');
font-weight: normal;
font-style: normal;
}
*
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
min-height: 100%;
width: auto;
}
.logo {
width: 100%;
}
button {
display: inline-block;
position: relative;
top: -45px;
width: 222px;
height: 35px;
padding: 5px 14px 0 18px;
background-color: #a2dc3c;
background-image: linear-gradient(to bottom, #a2dc3c 0%, #81b427 100%);
border: none;
color: #fff;
border-radius: 5px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
font-family: open-sans, sans-serif;
}
.main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main-content {
text-align: center;
font-family: open-sans, sans-serif;
font-size: 15px;
padding: 0 20px;
line-height: 30px;
}
a { color: #80b529 }
.content {
margin-top: 30px;
}
.coy-logo {
position: relative;
display: inline-flex;
max-width: 200px;
top: -10px;
}
.tavarlin-logo {
position: relative;
margin: auto;
height: auto;
top: -50px;
max-width: 180px;
}
.keto-logo {
position: relative;
height: auto;
top: -50px;
max-width: 140px;
}
.bottom-logos {
display: flex;
flex-direction: column;
justify-content: center;
}
.footer-nav {
width: 80%;
}
.footer-nav li {
padding-inline: 4px;
}
.bottom-nav {
list-style: none;
display: flex;
justify-content: end;
margin-top: 16px;
margin-bottom: 16px;
}
h1 {
margin-bottom: 20px;
font-size: 25px;
line-height: 16px;
}
h2 {
font-size: 20px;
margin-top: 40px;
margin-bottom: 40px;
}
h4 {
color: black;
margin-bottom: 12px;
font-size: 20px;
}
h5 {
font-size: 16px;
}
p {
display: block;
margin-bottom: 24px;
}
li {
padding-left: 20px;
margin-bottom: 10px;
}
.impressum-content {
font-size: 15px;
line-height: 24px;
margin: 0 auto;
padding: 0 22px;
position: relative;
width: 80%;
}
.impressum-content .footer-nav,
.datenschutz-content .footer-nav
{
width: 100%;
}
.content-area {
margin-top: 25px;
}
.datenschutz-content {
font-size: 17px;
display: block;
line-height: 24px;
margin: 0 auto;
padding-left: 22px;
list-style-position: inside;
width: 75%;
}
.datenschutz-text {
margin-top: 25px;
}
hr {
border-top: 1px solid #a2dc3c;
}
header.header {
display: flex;
justify-content: center;
align-items: center;
margin-inline: auto;
}
/* Bigger screens */
#media screen and (min-width: 800px) {
.logo {
transform: translate(0px, 30px);
}
.main-content {
font-size: 24px;
line-height: 50px;
}
.content {
margin-top: 55px;
margin-bottom: 20px;
}
.bottom-logos {
position: relative;
display: flex;
flex-direction: row;
align-items: center;
}
.coy-logo {
max-width: 400px;
margin-top: -10px;
}
.tavarlin-logo {
max-width: 328px;
margin: 0;
}
.keto-logo {
max-width: 300px;
}
button {
display: inline-block;
width: 400px;
padding: 8px 12px 8px 12px;
top: -15px;
margin-bottom: 40px;
background-color: #a2dc3c;
background-image: linear-gradient(to bottom, #a2dc3c 0%, #81b427 100%);
border: none;
color: #fff;
border-radius: 5px;
position: relative;
font-size: 20px;
font-weight: 700;
cursor: pointer;
font-family: open-sans, sans-serif;
}
}
/* Landscape */
#media screen and (min-width: 480px){
.logo {
display: inline-block;
text-align: center;
max-width: 320px;
transform: translate(0px, 8px);
}
.img-container {
display: inline-flex;
flex-direction: row;
margin: 0 40px;
max-width: 800px;
}
button {
top: -35px;
width: 300px;
height: 35px;
}
}
<!DOCTYPE html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Nu Prevento</title>
<link rel="stylesheet" type="text/css" media="screen" href="css/normalize.css">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
</head>
<body>
<div class="main">
<div class="main-content">
<a href="https://www.gesundheitsmanufaktur.de/marken/nuprevento" target="_blank" rel="nofollow noopener">
<img src="img/logonuprevento.png" alt="Nuprevento" class="logo">
</a>
<div class="btn-link">
<form action="https://www.gesundheitsmanufaktur.de/marken/nuprevento" method="get">
<button type="submit" formtarget="_blank">Produkte im Partnershop</button>
</form>
</div>
<p>Die Homepage der NuPrevento GmbH befindet sich in der Überarbeitung.</p>
<p>
Schreiben Sie uns bei Fragen oder Anregungen gern eine Mail an:
<a href='mailto:in%66o#nu%70re%76en%74o.co%6D'>
info#nuprevento.com</a>
</p>
<p class="content">Besuchen Sie in der Zwischenzeit gern unsere Partnerwebseiten:</p>
<div class="content">
<a href="https://www.dr-coy.info/" target="_blank">
<img src="img/logojohannescoy.png" class="coy-logo" alt="Johannes Coy">
</a>
</div>
<div class="bottom-logos">
<a href="https://www.tavarlin.com/" target="_blank">
<img src="img/logotavarlin.png" class="tavarlin-logo" alt="Tavarlin">
</a>
<a href="https://www.keto-drink.com/" target="_blank">
<img src="img/ketodrink.svg" class="keto-logo" width="300" height="300" alt="Keto-Drink">
</a>
</div>
</div>
<div class="footer-nav">
<hr>
<ul class="bottom-nav">
<li>Impressum</li>
<li>Datenschutzerklärung</li>
</ul>
</div>
</div>
</body>
</html>
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 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 am running into some issues with resizing of the window (shrinking). When I shrink it down, the background colors no longer stay at the edge of the viewport, and content goes beyond it.
I thought that setting the width on the entire body to 100% would fix that, but it didn't?
Here is a JSFiddle of my current code, for the index page and the stylesheet:
* {
margin: 0;
padding: 0;
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
width: 100%;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px 60px 60px 60px;
}
.buttons {
position: relative;
width: 1600px;
margin-right: 25px;
justify-content: space-around;
display: flex;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
I have tried going through my stylesheet, changing the widths on anything I have set with pixels to percentages, but it didn't seem to fix it. The only thing that -sort of- worked was changing the body position to fixed, but then none of the content was view-able if it got shrunk down, all it fixed was keeping the background/header/footer colors the same.
I imagine maybe my coding is a bit messy - I tried my best to be extensible, but being 100% new at this made it difficult.
Your problem is that you have width:1600px in .buttons just remove it and also add box-sizing:border-box to all (pseudo-)elements
EDIT:
you also need to add max-width:100% to .container and flex-wrap:wrap in .buttons
*,
*::before,
*::after {
margin: 0;
padding: 0;
box-sizing: border-box
}
body {
font-family: Segoe UI, helvetica, arial;
display: flex;
flex-direction: column;
min-height: 100vh;
font-size: 18px;
}
a {
color: hsl(344, 69%, 70%);
font-weight: bold;
}
a:hover {
text-decoration: none;
color: #67c3b2;
}
.menu-container {
background-color: rgba(150, 150, 150, 0.2);
padding: 20px 0;
display: flex;
justify-content: center;
text-transform: uppercase;
width: 100%;
}
.menu {
width: 90%;
display: flex;
top: 10px;
justify-content: space-between;
font-size: 16px;
overflow: hidden;
position: relative;
left: 10px;
}
.header-container {
background-color: rgba(150, 150, 150, 0.2);
display: flex;
justify-content: center;
height: 30px;
width: 100%;
position: relative;
}
.logo {
position: relative;
bottom: 37px;
z-index: 1;
}
.flex-container {
display: flex;
justify-content: center;
}
.flex-container p {
position: relative;
margin-left: 40px;
margin-right: 40px;
font-weight: bold;
top: 40px;
margin-top: 40px;
text-align: center;
}
.main {
display: flex;
color: #464646;
background: linear-gradient(to right, #77C9D4, #57BC90);
flex: 1;
}
.cakelist {
position: relative;
bottom: 50px;
display: flex;
font-weight: bold;
list-style-position: inside;
margin-top: 130px;
}
.cakelist ol,
table {
margin-left: 25px;
}
.cakelist h2 {
margin-left: 25px;
margin-top: 20px;
}
.container {
max-width: 100%
}
.carousel {
color: #464646;
top: 80px;
position: relative;
display: flex;
justify-content: center;
border: 3px outset gray;
align-items: center;
padding: 60px;
}
.buttons {
position: relative;
margin-right: 25px;
justify-content: space-around;
display: flex;
flex-wrap: wrap;
top: 160px;
text-align: center;
}
.button a:hover {
opacity: 0.2;
}
.buttons p {
margin-top: 20px;
}
.buttons img {
padding-top: 25px;
height: 200px;
}
.gallery {
position: relative;
top: 80px;
}
.pricing {
display: flex;
position: relative;
top: 80px;
justify-content: center;
flex-direction: column;
padding-bottom: 140px;
}
.pricing p,
h1 {
margin-left: 250px;
text-align: left;
margin-top: 5px;
}
.pricing span {
opacity: 0;
user-select: none;
}
.order {
position: relative;
border-radius: 5px;
background: hsl(344, 69%, 70%);
top: 20px;
margin-top: 60px;
padding: 5px;
}
#order-link {
color: white;
text-decoration: none;
}
.order-button {
width: 180px;
margin-left: auto;
margin-right: auto;
text-align: center;
}
.footer-container {
display: flex;
justify-content: flex-end;
align-items: center;
background: #9A9A9A;
height: 90px;
max-height: 90px;
}
.footer-logo {
height: 80px;
position: relative;
right: 10px;
}
.subscribe {
border-radius: 25px;
background: hsl(344, 69%, 70%);
padding: 5px 20px 5px 20px;
width: 80px;
}
#subscribe-link {
position: relative;
color: white;
text-decoration: none;
right: 40px;
}
<div class="menu-container">
<div class="menu">
<div class="flex-item">About Us</div>
<div class="flex-item">Cakes</div>
<div class="flex-item">Cupcakes</div>
<div class="flex-item">Gallery</div>
<div class="flex-item">Prices/Order</div>
<div class="flex-item">Search</div>
</div>
</div>
<header class="header-container">
<img src="TCCLogo.png" class="logo" />
</header>
<div class="flex-container main">
<div class="container">
<div class="carousel">
Here is where I will have the quick gallery/carousel when I get to JS.
</div>
<div class="buttons">
<div class="button">
<img src="cake.png" />
<p>Check out our delicious cake options!</p>
</div>
<div class="button">
<img src="cupcake.png" />
<p>Check out our delicious cupcake options!</p>
</div>
<div class="button">
<img src="prices.png" />
<p>Check out our competitive pricing!</p>
</div>
</div>
</div>
</div>
<footer class="footer-container">
<a id="subscribe-link" target="_blank" href="#">
<div class="subscribe">
<p>Subscribe</p>
</div>
</a>
<img src="TCCLogo.png" class="footer-logo" />
</footer>
I have made it proper as you needed. And it's working for me.
Please add below css
.container, .buttons {
max-width: 100%;
}