After the media query, I can't seem to manage to get the hamburger menu to show up. Navbar links do disappear, but the menu won't show up.
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--main-color: #ff702a;
--text-color: #fff;
--bg-color: #1e1c2a;
--big-font: 5rem;
--h2-font: 2.25rem;
--p-font: 0.9rem;
--bg-hover: #2f2b41;
}
body {
background-color: var(--bg-color);
font-family: "Poppins", sans-serif;
height: 2000px;
}
body .navbar {
background-color: grey;
display: flex;
justify-content: space-between;
height: 80px;
position: fixed;
width: 100%;
}
body .navbar .logo {
display: flex;
justify-content: center;
align-items: center;
margin-left: 30px;
}
body .navbar .logo a {
color: var(--main-color);
text-decoration: none;
font-weight: 900;
font-size: 2rem;
cursor: pointer;
}
body .navbar .hamburger-menu {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
body .navbar .hamburger-menu .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
body .navbar .navbar-menu {
display: flex;
align-items: center;
gap: 2rem;
margin-right: 25px;
min-width: auto;
}
body .navbar .navbar-menu li {
list-style: none;
opacity: 0.8;
transition: 0.4s ease;
border-radius: 50px;
}
body .navbar .navbar-menu li a {
text-decoration: none;
color: white;
font-size: 1.2rem;
padding: 0.8rem;
}
body .navbar .navbar-menu li:hover {
opacity: 1;
background-color: var(--bg-hover);
}
#media (max-width: 760px) {
.hamburger-menu {
display: flex;
}
.navbar-menu li {
display: none;
}
}
<!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>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- HEADER -->
<header class="navbar">
<div class="logo">
MyWeb
</div>
<a href="#" class="hamburger-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="navbar-menu">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</header>
<!-- SOMETHING -->
<script src="script.js"></script>
</body>
</html>
Your media query styles that make your hamburger visible are lower specificity and thus never applied.
/* Two class selectors */
body .navbar .hamburger-menu {
display: none;
}
#media (max-width: 760px) {
/* One class selector */
.hamburger-menu {
display: flex;
}
}
I compiled your scss into css for the snippet in both your question and this answer, you do NOT need to nest everything like there's no tomorrow - because you run into problems like this and it's just bad practice.
Go and remove all your unnecessary nesting!
*,
*::after,
*::before {
box-sizing: border-box;
margin: 0;
padding: 0;
}
:root {
--main-color: #ff702a;
--text-color: #fff;
--bg-color: #1e1c2a;
--big-font: 5rem;
--h2-font: 2.25rem;
--p-font: 0.9rem;
--bg-hover: #2f2b41;
}
body {
background-color: var(--bg-color);
font-family: "Poppins", sans-serif;
height: 2000px;
}
body .navbar {
background-color: grey;
display: flex;
justify-content: space-between;
height: 80px;
position: fixed;
width: 100%;
}
body .navbar .logo {
display: flex;
justify-content: center;
align-items: center;
margin-left: 30px;
}
body .navbar .logo a {
color: var(--main-color);
text-decoration: none;
font-weight: 900;
font-size: 2rem;
cursor: pointer;
}
body .navbar .hamburger-menu {
position: absolute;
top: 0.75rem;
right: 1rem;
display: none;
flex-direction: column;
justify-content: space-between;
width: 30px;
height: 21px;
}
body .navbar .hamburger-menu .bar {
height: 3px;
width: 100%;
background-color: white;
border-radius: 10px;
}
body .navbar .navbar-menu {
display: flex;
align-items: center;
gap: 2rem;
margin-right: 25px;
min-width: auto;
}
body .navbar .navbar-menu li {
list-style: none;
opacity: 0.8;
transition: 0.4s ease;
border-radius: 50px;
}
body .navbar .navbar-menu li a {
text-decoration: none;
color: white;
font-size: 1.2rem;
padding: 0.8rem;
}
body .navbar .navbar-menu li:hover {
opacity: 1;
background-color: var(--bg-hover);
}
#media (max-width: 760px) {
body .navbar .hamburger-menu {
display: flex;
}
.navbar-menu li {
display: none;
}
}
<!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>Document</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!-- HEADER -->
<header class="navbar">
<div class="logo">
MyWeb
</div>
<a href="#" class="hamburger-menu">
<span class="bar"></span>
<span class="bar"></span>
<span class="bar"></span>
</a>
<ul class="navbar-menu">
<li>Home</li>
<li>About</li>
<li>Menu</li>
<li>Services</li>
<li>Contact</li>
</ul>
</header>
<!-- SOMETHING -->
<script src="script.js"></script>
</body>
</html>
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;
}
some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
* {
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar {
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger {
display: none;
}
.navbar .menu ul {
display: flex;
}
.navbar .menu ul li a {
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a {
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active {
background: #5db485;
}
.container {
margin-top: 150px;
width: 1906px;
height: 397px;
}
.promo {
width: 1906px;
}
/* Safari Tours*/
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
;
width: 1906px;
}
.safari-title {
text-align: center;
padding-top: 30px;
font-size: 50px;
}
.banner {
display: flex;
justify-content: center;
}
.safari {
margin: 2%;
}
.safari img {
width: 500px;
}
/*Tablet*/
#media (max-width: 992px) {
.navbar {
height: 218px;
padding: 12px;
}
.navbar .inner_navbar {
flex-direction: column;
}
.container {
margin-top: 218px;
}
}
/*Mobile*/
#media (max-width: 728px) {
.navbar {
height: 150px;
}
.navbar .inner_navbar {
flex-direction: row;
}
.navbar .menu ul {
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li {
padding: 10px;
}
.navbar .menu ul li a {
width: 100%;
padding: 12px;
}
.navbar .hamburger {
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu {
display: none;
}
.navbar .menu.activate {
display: block;
}
.container {
margin-top: 150px;
width: 690px;
height: 144px;
}
.promo {
width: 690px;
}
.safari-tours {
background: linear-gradient(to bottom, #65214a, #8d2353, #b52455, #db2c4f, #fd3f41);
width: 690px;
}
.safari {
margin: 1%;
}
.safari img {
width: 300px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</header>
<section>
<div class="safari-tours">
<h1 class="safari-title">SAFARI TOURS</h1>
<div class="banner">
<div class="safari">
<img src="https://i.imgur.com/9QH8NFE.jpeg" alt="Morning Safari" />
</a>
</div>
<div class="safari">
<a href="https://bigdunestours.com/desert-safari" target="_top">
<img src="https://i.imgur.com/2E9ytwc.jpeg" alt="Evening Safari" />
</a>
</div>
</div>
</div>
</section>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function() {
menu.classList.toggle("activate");
})
</script>
</body>
</html>
some device like iMac it look perfect but some i see white box in other pc.in tablet and mobile screen gets auto zoom its not fit to device i have to zoom out which makes content small.
edited i did try as one of the comment mention but still no luckk the results are something like this
*{
list-style: none;
text-decoration: none;
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
background: #f7f7f7;
color: #545454;
}
/* NAVIGATION */
.navbar{
width: 100%;
height: 150px;
background: black;
position: fixed;
top: 0;
left: 0;
padding: 0 25px;
}
.navbar .inner_navbar{
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
height: 100%;
}
.navbar .hamburger{
display: none;
}
.navbar .menu ul{
display: flex;
}
.navbar .menu ul li a{
display: block;
width: 120px;
margin-right: 10px;
text-align: center;
font-size: 14px;
text-transform: uppercase;
color: #fff;
padding: 10px;
border-radius: 25px;
letter-spacing: 2px;
transition: all 0.2s ease;
}
.navbar .menu ul li:last-child a{
margin-right: 0;
}
.navbar .menu ul li a:hover,
.navbar .menu ul li a.active{
background: #5db485;
}
.container{
width: 100%;
max-width: 1906;
}
/*Tablet*/
#media (max-width: 992px){
.navbar{
height: 218px;
padding: 12px;
}
.navbar .inner_navbar{
flex-direction: column;
}
.container {
max-width: 991.98px;
}
}
/*Mobile*/
#media (max-width: 728px){
.navbar{
height: 150px;
}
.navbar .inner_navbar{
flex-direction: row;
}
.navbar .menu ul{
position: absolute;
top: 150px;
left: 0;
display: block;
background: orangered;
width: 100%;
}
.navbar .menu ul li{
padding: 10px;
}
.navbar .menu ul li a{
width: 100%;
padding: 12px;
}
.navbar .hamburger{
display: block;
position: absolute;
top: 15px;
right: 25px;
color: #fff;
font-size: 24px;
cursor: pointer;
transition: all 0.2s ease;
}
.navbar .menu{
display: none;
}
.navbar .menu.activate{
display: block;
}
.container{
max-width: 727.98px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Home</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="wrapper">
<div class="navbar">
<div class="inner_navbar">
<div class="logo">
<img src="/images/Final Logo.png" style="width: 150px;">
</div>
<div class="menu">
<ul>
<li>Home</li>
<li>Desert Safari</li>
<li>Tours</li>
<li>Activities</li>
<li>Contact-Us</li>
</ul>
</div>
</div>
<div class="hamburger">
<img src="/images/menu-btn.png" style="width: 40px;">
</div>
<div class="container">
<img class="promo" src="https://www.arabian-adventures.com/on/demandware.static/-/Sites-dnata-UAE-Library/default/dw922d22bf/images/slider/luxury-desert-camping-arabian-adventures-1920x400.jpg" alt="">
</div>
</div>
</div>
<script>
var hamburger = document.querySelector(".hamburger");
var menu = document.querySelector(".menu");
hamburger.addEventListener("click", function(){
menu.classList.toggle("activate");
})
</script>
</body>
</html>
Use 100% width and set a max-width for each #media.
Important: use % in your main layout, not absolute pixels.
By using this the content will not overflow the .container
.container {
width: 100%;
max-width: 1906px;
}
#media (max-width: 992px) {
.container {
/* width 100% is set aboven*/
max-width: 991.98px;
}
}
#media (max-width: 728px) {
.container {
/* width 100% is set aboven*/
max-width: 727.98px;
}
}
I 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.
/* GLOBAL */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#200;400;600&display=swap');
:root {
--nav-hue: #2300d1;
--background-color: #100e1a;
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
background-color: var(--background-color);
font-family: 'Poppins', sans-serif;
overflow-x: hidden;
}
h1, h2, h3, h4 {
font-weight: 300;
}
ul {
list-style: none;
}
a {
text-decoration: none;
color: white;
}
i {
margin-right: 0.3rem;
}
/* NAV */
.nav {
height: 60px;
width: 100vw;
background-color: black;
color: white;
border-bottom: 0.15rem solid var(--nav-hue);
}
.logo {
display: inline;
padding: 0.1rem 1.5rem;
}
.nav .left-menu, .nav .right-menu {
display: flex;
align-items: center;
margin-top: 0.4rem;
}
.nav .left-menu {
flex: 2;
margin-left: 1rem;
}
.nav .right-menu {
flex: 1;
margin-left: 10rem;
}
.nav ul li {
padding: 0 0.8rem;
}
.nav-search {
border: 1px solid white;
padding: 0.4rem 0.6rem;
border-radius: 2px;
outline: none;
text-align: center;
}
.nav-search:focus {
transition: letter-spacing 200ms ease-in-out;
letter-spacing: 0.05rem;
border: 1px solid var(--nav-hue);
}
.nav .nav-hover:hover, .nav .nav-hover:hover a, i:hover {
transition: all 100ms ease-in-out;
color: var(--nav-hue);
cursor: pointer;
}
.small-hover:hover {
transition: all 100ms ease-in-out;
transform: scale(1.5) translateY(-0.2rem);
}
/* MAIN */
.container {
max-width: 1100px;
margin: auto;
padding: 0.5rem;
}
/* SHOWCASE */
.showcase {
place-items: center;
margin-top: 1rem;
z-index: 2;
}
.showcase-img {
width: 960px;
height: 400px;
background-color: blue; /* For testing */
border-radius: 4px;
}
.showcase-img img {
width: 100%;
height: 100%;
opacity: 0.1;
}
.showcase ul {
display: flex;
bottom: 13.73rem;
position: relative;
justify-content: space-between;
}
.showcase ul li {
font-size: 2rem;
float: left;
}
/* UTILS */
/* GRID & FLEX */
.flex {
display: flex;
text-align: center;
}
.grid {
display: grid;
grid-template-columns: 1fr;
}
.grid-center {
place-items: center;
}
.nav-hue {
color: var(--nav-hue);
}
.bold {
font-weight: 400;
}
<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="all.css">
<title>GameBuy.com</title>
</head>
<body>
<!-- NAVBAR -->
<div class="nav">
<div class="flex">
<h1 class="logo">Game<span class="nav-hue bold">Buy.com</span></h1>
<ul class="left-menu">
<li><span class="nav-hover"><i class="fas fa-home"></i>Home</i></span></li>
<li><span class="nav-hover"><i class="fas fa-question"></i>About</i></span></li>
</ul>
<ul class="right-menu">
<li><input class="nav-search" type="search" placeholder="SEARCH"></li>
<li><i class="fas fa-shopping-cart small-hover"></i></li>
<li><i class="fas fa-search small-hover"></i></li>
</ul>
</div>
</div>
<div class="container">
<!-- SLIDER SHOWCASE -->
<div class="showcase grid">
<div class="showcase-img">
<img src="images/#" alt="">
</div>
<ul>
<li class="left-flash"><i class="fas fa-chevron-left"></i></li>
<li class="right-flash"><i class="fas fa-chevron-right"></i></li>
</ul>
</div>
</div>
</body>
</html>
// I want the left arrow to stick to the left side of the showcase-img container and the right arrow to the right side... I tried justify-content: space-between; but it didn't work, I can of course add margins but that's annoying and would make the site less responsive, any help is greatly appreciated!
 
it is very useful for your question
In my html file I have header and inside it there is ul>li>a menu
/* ****** */
:root {
--primary: #32a852;
--white: #fafafa;
--black: #000000;
--lightgrey: #c7c7c7;
--menu-items: #333333;
--mobile-menu: #4a4a4a;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.no-select {
}
/* Tags :) */
body {
padding: 0;
margin: 0;
background: var(--primary);
}
/* Header */
.header {
display: flex;
background: var(--white);
width: 100%;
height: 0%;
padding: 5px;
}
.menu-items {
flex: 1;
text-align: right;
display: inline-block;
list-style-type: none;
transform: translateY(30%);
}
.menu-items li {
display: inline-block;
margin-right: 20px;
}
.menu-items li a {
text-decoration: none;
color: var(--menu-items);
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.32rem;
}
.company-logo {
width: 50px;
}
.menu-on-off {
display: none;
width: 50px;
}
#media (max-width: 530px) {
.menu-on-off {
display: inline-block;
position: absolute;
right: 3%;
}
.menu-items {
text-align: left;
padding: 10px;
position: fixed;
background: var(--mobile-menu);
width: 100%;
height: 100vh;
}
.menu-items li {
margin-left: 10px;
margin-top: 20px;
display: block;
}
.menu-items li a {
font-size: 1.5rem;
color: var(--white);
}
}
/* Header& */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Реткинский Мультисад</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<!-- Header -->
<div class="header">
<img src="img/logo.png" class="company-logo" alt="Logo">
<div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
<ul class="menu-items">
<li>Продукты</li>
<li>Услуги</li>
<li>Галерея</li>
<li>Контакты</li>
</ul>
</div>
<!-- JavaScript -->
<script src="new.js"></script>
</body>
</html>
But here is a thing
Look here
1st there is a little margin-left for the menu and second more serious problem margin-top and in not media query code I dont added margin-top or margin-left.
Happy new year from Armenia ;p. Interesting what details need stackoverflow? Interesting what details need stackoverflow? Interesting what details need stackoverflow? Interesting what details need stackoverflow?
OK—a few minor changes here, but is working. Most have to do with element positioning.
/* ****** */
:root {
--primary: #32a852;
--white: #fafafa;
--black: #000000;
--lightgrey: #c7c7c7;
--menu-items: #333333;
--mobile-menu: #4a4a4a;
}
#import url('https://fonts.googleapis.com/css2?family=Open+Sans&family=Roboto&display=swap');
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
.no-select {
}
/* Tags :) */
body {
padding: 0;
margin: 0;
background: var(--primary);
}
/* Header */
.header {
display: flex;
background: var(--white);
width: 100%;
height: 0%;
padding: 5px;
}
.menu-items {
flex: 1;
text-align: right;
display: inline-block;
list-style-type: none;
}
.menu-items li {
display: inline-block;
margin-right: 20px;
}
.menu-items li a {
text-decoration: none;
color: var(--menu-items);
font-family: 'Roboto', sans-serif;
font-weight: 500;
font-size: 1.32rem;
}
.company-logo {
width: 50px;
}
.menu-on-off {
display: none;
width: 50px;
}
#media (max-width: 530px) {
.menu-on-off {
display: inline-block;
position: absolute;
right: 3%;
}
.menu-items {
text-align: left;
padding: 10px;
position: fixed;
background: var(--mobile-menu);
width: 100%;
top: 28px;
left: 0;
right: 0;
}
.menu-items li {
margin-left: 10px;
margin-top: 20px;
display: block;
}
.menu-items li a {
font-size: 1.5rem;
color: var(--white);
}
}
/* Header& */
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Реткинский Мультисад</title>
<link rel="shortcut icon" href="img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="new.css" />
</head>
<body>
<!-- Header -->
<div class="header">
<img src="img/logo.png" class="company-logo" alt="Logo">
<div style="text-align: right;"><img src="img/menu.png" class="menu-on-off" alt="Menu" onclick="menutoggle();"></div>
<ul class="menu-items">
<li>Продукты</li>
<li>Услуги</li>
<li>Галерея</li>
<li>Контакты</li>
</ul>
</div>
<!-- JavaScript -->
<script src="new.js"></script>
</body>
</html>