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>
Related
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/
This question already has answers here:
Footer at bottom of page or content, whichever is lower
(5 answers)
Closed last year.
I'm trying to make a website where I have a footer at the bottom of the page. I found another solution on how to place the footer at the bottom of the page online which worked amazing with no problems.
But when I tried making the website responsive I recognized that for some reason the footer took up a lot of space which created a lot of blank space between the main content and the footer. I've tried to remove the blank space, but that just results in a bunch of other problems.
Preferably I would want to remove the blank space and have the footer right under the main content of the page. Any help or advice would be appreciated!
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
#font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
#media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
#media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
#media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
#media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html>
The best solution would be to remove the flex from the body element & instead set the flex properties on the container. With your current structure, you can fix this by adding the following CSS to footer.
footer {
width: 100vw;
position: fixed;
bottom: 0;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
#font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
position: fixed;
width: 100vw;
bottom: 0;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
#media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
#media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
#media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
#media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</body>
</html
EDIT ~ OP want's container to be 100vh, use position: fixed; instead.
You can add this code to .pic:last-child:
.pic:last-child {
margin-bottom: -70px;
}
* {
box-sizing: border-box;
}
body {
font-family: Arial;
display: flex;
flex-direction: column;
height: 100vh;
margin: 0;
}
.container {
width: 100%;
border: 1px solid gray;
background-color: rgb(255, 255, 255);
border-bottom: 0px;
}
#font-face {
font-family: Gemosh;
src: url(Gemosh2.otf);
}
header {
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 60px;
}
footer {
padding: 1em;
color: white;
background-color: black;
text-align: center;
font-size: 15px;
}
.navbar {
display: flex;
margin-bottom: 0px;
justify-content: center;
justify-content: space-evenly;
padding: 1em;
padding-bottom: 1em;
padding-top: 0em;
}
.dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #444444 !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.dropdown a {
display: block;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: #636363;
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option:hover {
background-color: #abcdef !important;
color: white;
}
.active-dropdown {
display: flex;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
position: relative;
color: white;
text-decoration: none;
padding: 1.5em;
padding-top: 0.5em;
padding-bottom: 0.5em;
background-color: #04AA6D !important;
border-radius: 5px;
font-size: 15px;
transition: 0.2s;
}
.active-dropdown a {
display: block;
background-color: #11c784 !important;
color: white;
text-decoration: none;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
border-radius: 5px;
transition: 0.2s;
text-align: center;
}
.active-dropdown>.dropdown-sub {
display: none;
z-index: 1;
flex-direction: column;
position: absolute;
top: 35px;
background: rgb(4, 199, 129);
color: white;
border-radius: 5px;
transition: 0.2s;
width: 100%;
right: 0px;
}
.active-dropdown:hover>.dropdown-sub {
display: flex;
}
.dropdown-option a:hover {
background-color: #abcdef !important;
color: white;
}
.main {
padding: 1em;
display: flex;
flex-wrap: wrap;
flex-direction: column;
}
.test {
display: flex;
flex-direction: row;
justify-content: space-evenly;
font-size: 50px;
padding: 10px;
}
.londontxt {
flex: 20%;
padding: 2em;
font-size: 15px;
padding-bottom: 0em;
padding-top: 0em;
}
.pic {
flex: 20%;
padding: 10px;
}
.pic:last-child {
margin-bottom: -70px;
}
.pic img {
margin-left: 10%;
width: 80%;
}
.pic h2 {
margin-left: 10%;
}
#media only screen and (min-width: 600px) {
.londontxt {
padding: 3em;
padding-bottom: 0em;
padding-top: 0em;
}
}
#media only screen and (min-width: 680px) {
.londontxt {
padding: 4em;
padding-bottom: 0em;
padding-top: 0em;
font-size: 20px;
}
}
#media only screen and (min-width: 821px) {
header {
display: block;
font-family: Gemosh;
padding: 1em;
color: black;
background-image: url(header.jpg);
background-size: cover;
text-align: center;
height: 350px;
letter-spacing: 1em;
}
header h1 {
margin-top: 5%;
font-size: 120px;
}
.navbar {
justify-content: center;
gap: 50px;
padding: 1em;
padding-bottom: 4em;
padding-top: 1.5em;
}
.navbar a {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
transition: 0.2s;
}
.dropdown {
padding: 2em;
padding-top: 1em;
padding-bottom: 1em;
}
.dropdown a {
background-color: #636363 !important;
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
text-align: center;
}
.dropdown>.dropdown-sub {
top: 40px;
}
.dropdown-option a:hover {
color: white;
}
.active-dropdown {
padding: 1.8em;
padding-top: 1em;
padding-bottom: 1em;
}
.active-dropdown a {
padding: 0em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
.active-dropdown>.dropdown-sub {
top: 40px;
}
.main {
flex-direction: row;
}
.londontxt {
font-size: 15px;
padding: 1em;
}
}
#media only screen and (min-width: 1000px) {
.londontxt {
font-size: 20px;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>City</title>
<link href="london.css" rel="stylesheet" type="text/css">
<meta name="viewport" content="width=device-width">
</head>
<body>
<div class="container">
<header>
<h1>City Gallery</h1>
</header>
<div class="navbar">
<div class="active-dropdown">
<div class="dropdown-title">London</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Paris</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
<div class="dropdown">
<div class="dropdown-title">Tokyo</div>
<div class="dropdown-sub">
<div class="dropdown-option">Overview</div>
<div class="dropdown-option">Wikipedia</div>
<div class="dropdown-option">Pictures</div>
</div>
</div>
</div>
<div class="main">
<div class="londontxt">
<h2>London</h2>
<p>London is the capital city of England. It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p>
<p>Standing on the River Thames, London has been a major settlement for two millennia, its history going back to its founding by the Romans, who named it Londinium.</p>
</div>
<div class="pic">
<h2>Tower Bridge:</h2>
<img src="londonbridge.jpg" alt="">
</div>
<div class="pic">
<h2>Big Ben:</h2>
<img src="londonbigben.jpg" alt="">
</div>
</div>
</div>
<footer>Copyright © 2022 Johannes</footer>
</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>
It happens that my "form" has 3 divs "(.contact-in)" which i call them with ":nth-child" in my css and with flex i do control their percentage on the site but in x-axis. So my question is how can i control their % in y-axis because they aren't covering the entire site and for example my footer isn't going all the way down because i'm not covering the entire page with the content.
Postscript: The site layout is with css grid.
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="../css/contact.css">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Lato:wght#300;400;700;900&family=Ubuntu:wght#300&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" crossorigin="anonymous">
<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins:ital,wght#0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap" rel="stylesheet">
<title>TRV ECOLOGICO SRL</title>
</head>
<body>
<div class="contenedor">
<nav class="contenedor-nav">
<div class="menu-navegacion">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
<div class="contenedor-texto">
<div class="textotriangulo"><h2>TRV ECOLOGICO SRL</h2></div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=index.html>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=contact.html>CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<div class="contenedor-form">
<div class="contact-wrap">
<div class="contact-in">
<h1>Información de Contacto</h1>
<h2><i class="fa fa-phone" aria-hidden="true"></i>Teléfono</h2>
<p>123 - 4567 - 8901</p>
<p>011 - 1234 - 5678</p>
<h2><i class="fa fa-envelope" aria-hidden="true"></i>Email</h2>
<p>asd#asdfgh.com.ar</p>
<p>asd#asdfgh.com.ar</p>
<h2><i class="fa fa-map-marker" aria-hidden="true"></i>Dirección</h2>
<p>Morón, Buenos Aires, Argentina</p>
</div>
<div class="contact-in">
<h1>Contacto</h1>
<form>
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<textarea placeholder="Mensaje" class="contact-in-textarea"></textarea>
<input type="submit" value="SUBMIT" class="contact-in-btn">
</form>
</div>
<div class="contact-in">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52502.855079198634!2d-58.65170330080583!3d-34.6691347508206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc76f57e3be01%3A0xa488fcdcec5b600f!2sMor%C3%B3n%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1618120836940!5m2!1ses!2sar" width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<footer class="contenedor-footer">
<div id="footer">
<p>TRV ECOLOGICO SRL - Todos los derechos reservados</p>
</div>
</footer>
</div>
</body>
CSS
*{
padding: 0;
margin: 0;
box-sizing: border-box;
}
body{
font-family: 'Poppins', sans-serif;
background: #fff;
}
/*GRID CONTENEDOR*/
.contenedor{
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(3, auto);
}
.contenedor .contenedor-nav{
grid-column-start: 1;
grid-column-end: 4;
}
.contenedor .contenedor-form{
grid-column: span 2;
}
.contenedor .contenedor-footer{
grid-column-start: 1;
grid-column-end: 4;
}
/* MENU NAVEGACION*/
nav{
position: sticky;
top: 0;
z-index: 30;
}
.menu-navegacion{
width: 100%;
margin: auto;
overflow: hidden;
padding: 0;
display: flex;
height: 80px;
justify-content: space-between;
align-items: center;
background-color: rgb(54, 54, 54);
}
.logo{
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo{
height: 100%;
position: absolute;
}
.triangulo{
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.contenedor-texto{
display: flex;
align-items: center;
justify-content:center;
height: 50px;
width: 100%;
}
.textotriangulo{
position: absolute;
font-weight: 700;
color: rgb(255, 255, 255);
font-size: 1em;
text-shadow: 3px 2px 1px rgba(54, 54, 54, 0.493);
}
.menu-lista{
margin-right: 20%;
}
.menu-lista ul li{
list-style: none;
display: inline-block;
}
.menu-lista ul li a{
text-decoration: none;
color: white;
padding-left: 20px;
}
/* FORM */
.contact-wrap{
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.contact-in{
padding: 40px 30px;
}
.contact-in:nth-child(1){
flex: 30%;
background: url(../images-form/1.jpg);
color: #fff;
}
.contact-in:nth-child(2){
flex: 45%;
background: #c31432;
}
.contact-in:nth-child(3){
flex: 25%;
padding: 0;
}
.contact-in h1{
font-size: 24px;
color: #fff;
text-transform: uppercase;
font-weight: 500;
}
.contact-in h2{
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
}
.contact-in h2 i{
font-size: 16px;
width: 40px;
height: 40px;
margin-right: 10px;
background: #f5f5f5;
color: #000;
border-radius: 50px;
line-height: 40px;
text-align: center;
}
.contact-in p{
font-size: 14px;
font-weight: 300;
margin-bottom: 20px;
}
.contact-in form{
width: 100%;
height: auto;
}
.contact-in-input{
width: 100%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
}
.contact-in-textarea{
width: 100%;
height: 140px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-top: 5px;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
}
.contact-in-btn{
width: 100%;
height: 40px;
border: 1px solid #fff;
outline: none;
font-size: 12px;
font-weight: 300;
font-family:'Poppins', sans-serif;
cursor: pointer;
}
.contact-in iframe{
width: 100%;
height: 100%;
}
#media only screen and (max-width:480px){
.contact-in:nth-child(1){
flex: 50%;
}
.contact-in:nth-child(2){
flex: 50%;
}
.contact-in:nth-child(3){
flex: 100%;
}
}
#media only screen and (max-width:360px){
.contact-in:nth-child(1){
flex: 50%;
}
.contact-in:nth-child(2){
flex: 50%;
}
.contact-in:nth-child(3){
flex: 100%;
}
}
/* FOOTER */
#footer{
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(54, 54, 54);
height: 80px;
width: 100%;
}
#footer p{
color: white;
font-weight: 400;
font-family: 'Ubuntu', sans-serif;
padding: 5px;
border-bottom: solid white 1px;
}
First make the height of html and body to 100%.
html, body{
height: 100%;
}
If you want to make the footer height is to be 80px, then make it in contenedor class
.contenedor{
...
grid-template-rows: repeat(2, auto) 80px;
}
Why to make height internally 80px when you can control it with grid using grid-template-rows.
#footer{
...
height: 80px; // Should be avoided as per your design
... // instead add height for whole footer in grid-tempate-rows
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html,
body {
height: 100%;
}
body {
font-family: 'Poppins', sans-serif;
background: #fff;
}
/*GRID CONTENEDOR*/
.contenedor {
height: 100%;
width: 100%;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-template-rows: repeat(2, auto) 80px;
}
.contenedor .contenedor-nav {
grid-column-start: 1;
grid-column-end: 4;
}
.contenedor .contenedor-form {
grid-column: span 2;
}
.contenedor .contenedor-footer {
grid-column-start: 1;
grid-column-end: 4;
}
/* MENU NAVEGACION*/
nav {
position: sticky;
top: 0;
z-index: 30;
}
.menu-navegacion {
width: 100%;
margin: auto;
overflow: hidden;
padding: 0;
display: flex;
height: 80px;
justify-content: space-between;
align-items: center;
background-color: rgb(54, 54, 54);
}
.logo {
padding-right: 10%;
padding-left: 10%;
height: 50px;
width: 20%;
display: flex;
justify-content: center;
margin-left: 1%;
position: relative;
}
.contenedor-triangulo {
height: 100%;
position: absolute;
}
.triangulo {
height: 0%;
width: 0%;
border-right: 30px solid transparent;
border-left: 30px solid transparent;
border-bottom: 50px solid red;
display: block;
}
.contenedor-texto {
display: flex;
align-items: center;
justify-content: center;
height: 50px;
width: 100%;
}
.textotriangulo {
position: absolute;
font-weight: 700;
color: rgb(255, 255, 255);
font-size: 1em;
text-shadow: 3px 2px 1px rgba(54, 54, 54, 0.493);
}
.menu-lista {
margin-right: 20%;
}
.menu-lista ul li {
list-style: none;
display: inline-block;
}
.menu-lista ul li a {
text-decoration: none;
color: white;
padding-left: 20px;
}
/* FORM */
.contact-wrap {
width: 100%;
height: auto;
margin: auto;
display: flex;
flex-wrap: wrap;
}
.contact-in {
padding: 40px 30px;
}
.contact-in:nth-child(1) {
flex: 30%;
background: url(../images-form/1.jpg);
color: #fff;
}
.contact-in:nth-child(2) {
flex: 45%;
background: #c31432;
}
.contact-in:nth-child(3) {
flex: 25%;
padding: 0;
}
.contact-in h1 {
font-size: 24px;
color: #fff;
text-transform: uppercase;
font-weight: 500;
}
.contact-in h2 {
font-size: 20px;
font-weight: 400;
margin-bottom: 15px;
}
.contact-in h2 i {
font-size: 16px;
width: 40px;
height: 40px;
margin-right: 10px;
background: #f5f5f5;
color: #000;
border-radius: 50px;
line-height: 40px;
text-align: center;
}
.contact-in p {
font-size: 14px;
font-weight: 300;
margin-bottom: 20px;
}
.contact-in form {
width: 100%;
height: auto;
}
.contact-in-input {
width: 100%;
height: 40px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
.contact-in-textarea {
width: 100%;
height: 140px;
margin-bottom: 20px;
border: 1px solid #fff;
outline: none;
padding-top: 5px;
padding-left: 5px;
color: #fff;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
}
.contact-in-btn {
width: 100%;
height: 40px;
border: 1px solid #fff;
outline: none;
font-size: 12px;
font-weight: 300;
font-family: 'Poppins', sans-serif;
cursor: pointer;
}
.contact-in iframe {
width: 100%;
height: 100%;
}
#media only screen and (max-width:480px) {
.contact-in:nth-child(1) {
flex: 50%;
}
.contact-in:nth-child(2) {
flex: 50%;
}
.contact-in:nth-child(3) {
flex: 100%;
}
}
#media only screen and (max-width:360px) {
.contact-in:nth-child(1) {
flex: 50%;
}
.contact-in:nth-child(2) {
flex: 50%;
}
.contact-in:nth-child(3) {
flex: 100%;
}
}
/* FOOTER */
#footer {
display: flex;
justify-content: center;
align-items: center;
background-color: rgb(54, 54, 54);
height: 80px;
width: 100%;
}
#footer p {
color: white;
font-weight: 400;
font-family: 'Ubuntu', sans-serif;
padding: 5px;
border-bottom: solid white 1px;
}
<div class="contenedor">
<nav class="contenedor-nav">
<div class="menu-navegacion">
<div class="logo">
<div class="contenedor-triangulo">
<div class="triangulo"></div>
</div>
<div class="contenedor-texto">
<div class="textotriangulo">
<h2>TRV ECOLOGICO SRL</h2>
</div>
</div>
</div>
<div class="menu-lista">
<ul>
<li><a href=index.html>INICIO</a></li>
<li><a href=#>PRODUCTOS</a></li>
<li><a href=#>EMPRESA</a></li>
<li><a href=contact.html>CONTACTO</a></li>
</ul>
</div>
</div>
</nav>
<div class="contenedor-form">
<div class="contact-wrap">
<div class="contact-in">
<h1>Información de Contacto</h1>
<h2><i class="fa fa-phone" aria-hidden="true"></i>Teléfono</h2>
<p>123 - 4567 - 8901</p>
<p>011 - 1234 - 5678</p>
<h2><i class="fa fa-envelope" aria-hidden="true"></i>Email</h2>
<p>asd#asdfgh.com.ar</p>
<p>asd#asdfgh.com.ar</p>
<h2><i class="fa fa-map-marker" aria-hidden="true"></i>Dirección</h2>
<p>Morón, Buenos Aires, Argentina</p>
</div>
<div class="contact-in">
<h1>Contacto</h1>
<form>
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<input type="text" placeholder="Nombre Completo" class="contact-in-input">
<textarea placeholder="Mensaje" class="contact-in-textarea"></textarea>
<input type="submit" value="SUBMIT" class="contact-in-btn">
</form>
</div>
<div class="contact-in">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d52502.855079198634!2d-58.65170330080583!3d-34.6691347508206!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x95bcc76f57e3be01%3A0xa488fcdcec5b600f!2sMor%C3%B3n%2C%20Provincia%20de%20Buenos%20Aires!5e0!3m2!1ses!2sar!4v1618120836940!5m2!1ses!2sar"
width="100%" height="auto" style="border:0;" allowfullscreen="" loading="lazy"></iframe>
</div>
</div>
</div>
<footer class="contenedor-footer">
<div id="footer">
<p>TRV ECOLOGICO SRL - Todos los derechos reservados</p>
</div>
</footer>
</div>
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>