I'm trying to horizontally center this toggle switch that has two lines of text :
https://codesandbox.io/s/sharp-ritchie-egmqmr?file=/index.html
But I need it to be horizontally centered like this :
Just add a main div, that wraps the whole container. And add the following styles to it:
.main {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;}
<!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>
<style>
.main {
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}
#import url("https://fonts.googleapis.com/css2?family=Prompt&display=swap");
.toggle {
width: 175px;
height: 46px;
font-stretch: normal;
font-style: normal;
letter-spacing: normal;
text-align: left;
border: solid 1px #ebebeb;
border-radius: 30px;
position: relative;
display: flex;
flex-direction: row;
justify-content: space-between;
place-items: center;
margin-right: 0;
font-family: "Prompt", sans-serif;
font-size: 16px;
color: #333;
outline: 0;
text-decoration: none;
transition: all 500ms;
margin-left: 0;
}
span {
width: 50%;
height: 50%;
margin: 0;
text-align: center;
cursor: pointer;
user-select: none;
color: #333;
}
span.selected {
color: white;
}
.toggle::after {
background-color: #333;
content: "";
position: absolute;
z-index: -1;
left: 3px;
top: 4px;
width: 84px;
border-radius: 30px;
background-image: linear-gradient(111deg, #1dceb4 17%, #8fd534 87%);
height: 38px;
transition: all 200ms ease-in;
}
.rightSelected::after {
left: calc(50% + 4px);
}
.label-container {
display: flex;
flex-direction: column;
margin: auto;
width: fit-content;
}
p.standard {
padding-bottom: 1px;
}
p.express {
padding-bottom: 2px;
}
p {
margin: 0;
margin-block-start: 0;
margin-block-end: 0;
font-family: Prompt;
font-size: 14px;
font-weight: 600;
text-align: right;
}
p.delivery {
font-style: italic;
font-weight: 300;
font-size: 10px;
margin-top: -6px;
}
</style>
</head>
<body>
<div class="main">
<div class="toggle" id="toggle">
<span onclick="select()">
<div class="label-container">
<p class="standard">Standard</p>
<p class="delivery">Delivery</p>
</div>
</span>
<span onclick="select()">
<div class="label-container">
<p class="express">Express</p>
<p class="delivery">Delivery</p>
</div>
</span>
</div>
</div>
<script>
let toggle = document.getElementById("toggle");
console.log(toggle);
function select() {
toggle.classList.toggle("rightSelected");
}
</script>
</body>
</html>
I think this is what you wanted: https://k8wo13.csb.app/
Related
I'm started learing html/css my first project was portfolio and i fell in this issue.
the full navigation bar is not visible on mobile devices also the text in the middle of the page is too large.
site source:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPGL Portfolio</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="nav">
<div class="logo">
<img src="https://avatars.githubusercontent.com/u/74413191?s=400&u=7076f19ee2d11687d44fe772ee5a76ce3c437679&v=4" alt="logo" height="50px" width="50px">
<h1>OPGL</h1>
</div>
<div class="nav-links">
Home
About
Projects
Contact
</div>
</div>
<div class="content">
<h1>Hi,<br/>
I'm Dawid,<br/>
<div>Begginer Developer</div>
</h1>
<p><!-- Begginer Web Developer, see more in about section --></p>
</div>
<div class="footer">
<p>Made by Dawid Ploch via VSCode</p>
</div>
</div>
</body>
</html>
#import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital#1&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background: #080a0b;
}
.container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 0px 0px 5px 5px;
width: 100%;
padding: 20px;
position: fixed;
top: 0;
z-index: 1;
}
.logo {
color: #fff;
font-family: 'Abel', sans-serif;
font-size: 30px;
}
.nav-links {
display: flex;
align-items: center;
}
.nav-links a {
color: #fff;
text-decoration: none;
font-family: 'Abel', sans-serif;
margin-left: 20px;
font-size: 20px;
transition: all 0.3s ease;
}
.nav-links a:hover {
color: #00b894;
}
.content {
color: rgba(255, 255, 255, 0.75);
align-items: center;
justify-content: center;
}
.content h1 {
font-size: 50px;
font-family: 'Raleway', sans-serif;
padding: 20px;
}
.content h1 div {
font-size: 30px;
}
.content p {
text-align: center;
color: gray;
}
.footer {
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
background-color: #0d1012;
border-radius: 5px 5px 0px 0px;
min-width: 100%;
padding: 20px;
position: absolute;
bottom: -150px;
z-index: 1;
}
.footer p {
color: #fff;
font-family: 'Abel', sans-serif;
font-size: 20px;
}
hosted website: link
i expect that Navigation Bar and text should smaller on mobile devices.
everything should be 100% visible
You can make the nav links stack by changing display: flex; to display: inline-block; in CSS under .nav-links
And if you want the text in the middle to be smaller you can simply change the font size in this part of your CSS:
.content h1 {
font-size: 50px;
font-family: 'Raleway', sans-serif;
padding: 20px;
}
.content h1 div {
font-size: 30px;
}
Now to put it all together so this only happens on mobiles and small screens, you can simply just add this code to your CSS under a media query like this:
#media (max-width: 750px) {
.nav-links {
display: inline-block;
align-items: center;
}
.content h1 {
font-size: 25px;
font-family: 'Raleway', sans-serif;
padding: 20px;
}
.content h1 div {
font-size: 12px;
}
}
Here it is working:
#import url('https://fonts.googleapis.com/css2?family=Abel&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Raleway:ital#1&display=swap');
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Montserrat', sans-serif;
background: #080a0b;
}
.container {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
border-radius: 0px 0px 5px 5px;
width: 100%;
padding: 20px;
position: fixed;
top: 0;
z-index: 1;
}
.logo {
color: #fff;
font-family: 'Abel', sans-serif;
font-size: 30px;
}
.nav-links {
display: flex;
align-items: center;
}
.nav-links a {
color: #fff;
text-decoration: none;
font-family: 'Abel', sans-serif;
margin-left: 20px;
font-size: 20px;
transition: all 0.3s ease;
}
.nav-links a:hover {
color: #00b894;
}
.content {
color: rgba(255, 255, 255, 0.75);
align-items: center;
justify-content: center;
}
.content h1 {
font-size: 50px;
font-family: 'Raleway', sans-serif;
padding: 20px;
}
.content h1 div {
font-size: 30px;
}
.content p {
text-align: center;
color: gray;
}
.footer {
display: flex;
align-items: center;
overflow: hidden;
justify-content: center;
background-color: #0d1012;
border-radius: 5px 5px 0px 0px;
min-width: 100%;
padding: 20px;
position: absolute;
bottom: -150px;
z-index: 1;
}
.footer p {
color: #fff;
font-family: 'Abel', sans-serif;
font-size: 20px;
}
#media (max-width: 750px) {
.nav-links {
display: inline-block;
align-items: center;
}
.content h1 {
font-size: 25px;
font-family: 'Raleway', sans-serif;
padding: 20px;
}
.content h1 div {
font-size: 12px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>OPGL Portfolio</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container">
<div class="nav">
<div class="logo">
<img src="https://avatars.githubusercontent.com/u/74413191?s=400&u=7076f19ee2d11687d44fe772ee5a76ce3c437679&v=4" alt="logo" height="50px" width="50px">
<h1>OPGL</h1>
</div>
<div class="nav-links">
Home
About
Projects
Contact
</div>
</div>
<div class="content">
<h1>Hi,<br/>
I'm Dawid,<br/>
<div>Begginer Developer</div>
</h1>
<p><!-- Begginer Web Developer, see more in about section --></p>
</div>
<div class="footer">
<p>Made by Dawid Ploch via VSCode</p>
</div>
</div>
</body>
</html>
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>
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>
When I resize image in <body>, it also changes the size of the logo in the <nav> tag.
I don't think this is the best or most efficient way to code the design for my simplistic website (I have attatched a snapshot of the website here)
When I resize the window smaller the image overrides my navigation menu like this.
HTML:
<!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>BLONDED</title>
<link rel="stylesheet" href="style.css">
</head>
<nav>
<span class="logo">Blonded</span>
<header>
<ul class="__navlist">
<li>HOME</li>
<li>AUDIO</li>
<li>SHOWCASE</li>
<li>CONTACT</li>
</ul>
</header>
</nav>
<body class="gallery">
<img src="img/bdcmag3.jpg" alt="boysdontcry!">
</body>
</html>
CSS:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "SF Pro Display", sans-serif;
font-size: 18px;
}
nav {
display: flex;
min-height: 15vh;
justify-content: center;
align-items: center;
}
.logo{
font-family: "Blonde";
font-size: 1.8rem;
cursor: pointer;
color: black;
padding-top: 1rem;
padding-bottom: 2rem;
}
header {
display: inline-block;
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
margin-top: 6.5em;
}
.__navlist {
word-spacing: 150px;
}
.__navlist li {
display: inline-block;
overflow: hidden;
padding-bottom: 20px;
}
a {
text-decoration: none;
color: rgb(10, 10, 10);
}
.gallery {
width: 100%;
padding: 20;
}
.gallery img{
box-sizing: border-box;
width: 20%;
}
Change your css code to this:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html {
font-family: "SF Pro Display", sans-serif;
font-size: 18px;
}
nav {
display: flex;
min-height: 15vh;
justify-content: center;
align-items: center;
flex-wrap: wrap;
}
.logo {
font-family: "Blonde";
font-size: 1.8rem;
cursor: pointer;
color: black;
padding-top: 1rem;
padding-bottom: 2rem;
width: 100%;
text-align: center;
}
header {
/* display: inline-block; */
/* position: absolute; */
/* top: 0; */
/* left: 0; */
/* width: 100%; */
text-align: center;
/* margin-top: 6.5em; */
}
.__navlist {
word-spacing: 150px;
}
.__navlist li {
display: inline-block;
overflow: hidden;
padding-bottom: 20px;
}
a {
text-decoration: none;
color: rgb(10, 10, 10);
}
.gallery {
width: 100%;
padding: 20;
}
.gallery img {
box-sizing: border-box;
width: 20%;
}
Context: I have a relative div which contain an image and a card with some information. The card is overlapping the bottom of the image with an absolute position but when resizing, the card does not stay at the same position within his parent div and goes following the rule of another container:
Achievement: What I am trying to do is whine resizing the browser, I want the card to stay at the same position on the image (overlapping).
Here is my html:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
flex-direction: column;
color: white;
background-color: #181719;
}
main {
padding: 46px 76px 46px 77px;
max-width: 1440px;
margin: auto;
border: solid 1px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: "Crimson Pro";
border: solid 1px;
padding: 8px;
font-size: 18px;
font-weight: 200;
}
ul {
display: flex;
justify-content: space-between;
list-style: none;
flex: 0.4;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 18px;
}
.container {
display: flex;
margin-top: 177px;
justify-content: space-between;
gap: 139px;
}
.main_image {
border: #828282 solid;
position: relative;
}
.main_image img {
width: 100%;
height: auto;
}
h1 {
font-family: "Lora";
font-size: 48px;
}
.text_presentation i {
margin-left: 15px;
vertical-align: middle;
}
.text_presentation p {
font-family: "Montserrat";
font-weight: 300;
font-size: 24px;
margin-top: 40px;
width: 410px;
}
.text_presentation a {
font-family: "Montserrat";
font-weight: 600;
margin-top: 48px;
position: absolute;
}
.card {
position: absolute;
width: 410px;
height: 189px;
background-color: #181719;
top: 477px;
bottom: 30px;
right: 32px;
left: 300px;
border: solid red;
}
.card_info {
display: flex;
position: relative;
}
.card img {
border-radius: 50%;
width: 50px;
height: 50px;
margin: 18px 0px 0px 31px;
}
.card h3,
h4 {
font-family: "Montserrat";
font-weight: 500;
}
.card h3 {
position: absolute;
font-size: 14px;
top: 23px;
left: 100px;
}
.card h4 {
position: absolute;
color: #828282;
font-size: 12px;
width: 202px;
top: 48px;
left: 100px;
}
.card p {
font-family: "Lora";
font-weight: 700;
font-size: 24px;
width: 287px;
margin: 30px 0px 0px 28px;
}
footer {
font-family: "Montserrat";
font-size: 17px;
text-align: center;
margin-top: 206px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interior Design</title>
<link
href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght#200;400&family=Lora&family=Montserrat:wght#300;400;500&display=swap"
rel="stylesheet"
/>
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<main>
<nav>
<div class="logo">
<p>This Interior</p>
</div>
<ul>
<li>Home</li>
<li>Collection</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<div class="text_presentation">
<h1>Modern Interior</h1>
<p>
A full-Service residential & commercial interior design and staging
company offering professional organizing & eco-services.
</p>
<a>Read more<i class="lni lni-arrow-right"></i></a>
</div>
<div class="main_image">
<img src="/photo1.png" alt="photo" />
<div class="card">
<div class="card_info">
<img src="/photo2.png" alt="photo2" />
<h3>Aliza Webbler</h3>
<h4>Interior Designer</h4>
</div>
<p>Designed in 2020 by Aliza Webber</p>
</div>
</div>
</div>
<footer>
<p>Rémy # Devchallenge.io</p>
</footer>
</main>
</body>
</html>
I guess I am missing something but I do not know where.
Thank you for your help.
The changes I made are in classes: .card , .main_image and .main_image img
The way I made the changes makes this part of the web page responsive.
On the .card element the absolute position is replaced by a relative one. This allows you to position the element more flexibly.
For .main_image and .main_image img. I moved the border from the DIV element to the picture. In this way, the DIV element remains as a package for both elements.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Interior Design</title>
<link
href="https://fonts.googleapis.com/css2?family=Crimson+Pro:wght#200;400&family=Lora&family=Montserrat:wght#300;400;500&display=swap"
rel="stylesheet" />
<link href="https://cdn.lineicons.com/2.0/LineIcons.css" rel="stylesheet" />
<link rel="stylesheet" href="/style.css" />
</head>
<body>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
display: flex;
justify-content: center;
flex-direction: column;
color: white;
background-color: #181719;
}
main {
padding: 46px 76px 46px 77px;
max-width: 1440px;
margin: auto;
border: solid 1px;
}
nav {
display: flex;
justify-content: space-between;
align-items: center;
}
.logo {
font-family: "Crimson Pro";
border: solid 1px;
padding: 8px;
font-size: 18px;
font-weight: 200;
}
ul {
display: flex;
justify-content: space-between;
list-style: none;
flex: 0.4;
font-family: "Montserrat";
font-weight: 500;
font-style: normal;
font-size: 18px;
}
.container {
display: flex;
margin-top: 177px;
justify-content: space-between;
gap: 139px;
}
.main_image {
position: relative;
}
.main_image img {
width: 100%;
height: auto;
border: #828282 solid;
}
h1 {
font-family: "Lora";
font-size: 48px;
}
.text_presentation i {
margin-left: 15px;
vertical-align: middle;
}
.text_presentation p {
font-family: "Montserrat";
font-weight: 300;
font-size: 24px;
margin-top: 40px;
width: 410px;
}
.text_presentation a {
font-family: "Montserrat";
font-weight: 600;
margin-top: 48px;
position: absolute;
}
.card {
position: relative;
width: 410px;
height: 189px;
background-color: #181719;
border: solid red;
margin-top: -80px;
margin-left: auto;
margin-right: 3%;
}
.card_info {
display: flex;
position: relative;
}
.card img {
border-radius: 50%;
width: 50px;
height: 50px;
margin: 18px 0px 0px 31px;
}
.card h3,
h4 {
font-family: "Montserrat";
font-weight: 500;
}
.card h3 {
position: absolute;
font-size: 14px;
top: 23px;
left: 100px;
}
.card h4 {
position: absolute;
color: #828282;
font-size: 12px;
width: 202px;
top: 48px;
left: 100px;
}
.card p {
font-family: "Lora";
font-weight: 700;
font-size: 24px;
width: 287px;
margin: 30px 0px 0px 28px;
}
footer {
font-family: "Montserrat";
font-size: 17px;
text-align: center;
margin-top: 206px;
}
</style>
<main>
<nav>
<div class="logo">
<p>This Interior</p>
</div>
<ul>
<li>Home</li>
<li>Collection</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
<div class="container">
<div class="text_presentation">
<h1>Modern Interior</h1>
<p>
A full-Service residential & commercial interior design and staging
company offering professional organizing & eco-services.
</p>
<a>Read more<i class="lni lni-arrow-right"></i></a>
</div>
<div class="main_image">
<img src="https://blog.54ka.org/wp-content/uploads/2020/08/profile-view-of-a-brown-horse_by_54ka.jpg"
alt="photo" />
<div class="card">
<div class="card_info">
<img src="/photo2.png" alt="photo2" />
<h3>Aliza Webbler</h3>
<h4>Interior Designer</h4>
</div>
<p>Designed in 2020 by Aliza Webber</p>
</div>
</div>
</div>
<footer>
<p>Rémy # Devchallenge.io</p>
</footer>
</main>
</body>
</html>