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>
Related
So I'm still new to web developing and currently working on a restaurant site but when I view the page on smaller screens it's not displaying properly (not show full width) and the navbar is completely gone. How can I get this to properly show on smaller screens and the navbar to either become a togglebar or display under the logo? I think my current CSS setting might be to blame. Thanks
I have tried optimising with CSS and see if it can show the full page on smaller screens and have been able to achieve that for iPad Air and bigger screens but still no luck on smaller ones.
Happy to share my code if needed
HTML
<body>
<p class="catering">*Catering services available for hire</p>
<header>
<img class="shop-logo w-55" src="/FBS LOGO.png">
<nav class="navbar navbar-default">
<div class="hover-underline-animation"> Menu </div>
<div class="hover-underline-animation">Order</div>
<div class="hover-underline-animation">Location </div>
<div class="hover-underline-animation">Contact</div>
</nav>
</header>
<section class="about" id="about">
<div class="row">
<div class="image">
<img src="FBS_ISLAND GIRL_.png" alt="">
</div>
<div class="content">
<h3>
<span class="line-1"> "Authentic </span> <span class="line-2"> <br> Caribbean </span> <span class="line-3"><br> Cuisine" </span>
<span class="line-4"><br> jus lik momma use tah mek it </span>
</h3>
</div>
</div>
<p class="share"> Like, Follow `n Share <br> <i class="fa-brands fa-instagram"> </i> FOOD_BY_SOPHIE </i> </p>
</section>
<section class="order" id="order">
<h3 class="sub-heading">
Order Now
</h3>
<h1 class="heading">
Collection Only
</h1>
<form action="https://formsubmit.co/a5f5a32519da94e6ed9ceef9fd5cf8af" class="form-alert" method="POST">
<!- Honeypot -->
<input type="text" name="_honey" style="display: none;">
<!- Disaple Captcha -->
<input type="hidden" name="_captcha" value="false">
<input type="hidden" name="_next" value="https://sprightly-meerkat-b47b9e.netlify.app/">
<div class="inputBox">
<div class="input">
<span>
Your name
</span>
<input type="text" name="name" placeholder="Enter your name">
</div>
<div class="input">
<span>
Your number
</span>
<input type="number" name="number" placeholder="Enter your number">
</div>
</div>
<div class="inputBox">
<div class="input">
<span>
Your order
</span>
<input type="text" name="order" placeholder="Enter your order">
</div>
<div class="input">
<span>
Additional orders
</span>
<input type="text" name="extras" placeholder="Extras">
</div>
</div>
<div class="inputBox">
<div class="input">
<span>
How much
</span>
<input type="number" name="amount" placeholder="How many orders">
</div>
<div class="input">
<span>
Collection date & time
</span>
<input type="datetime-local" name="time">
</div>
</div>
<div class="inputBox">
<div class="input">
<span>
Your message
</span>
<textarea name="message" placeholder="Enter your message" id="" cols="30" rows="10"></textarea>
</div>
</div>
<input type="submit" value="Order now" class="btn btn-dark">
</form>
</section>
CSS
#import url('https://fonts.googleapis.com/css2?family=Libre+Bodoni:ital#1&family=Nunito:wght#200;300;400;600;700&display=swap');
:root{
--green:#27ae60;
--black:#192a56;
--light-color:#666;
--box-shadow:0 .5rem 1.5rem rgba(0,0,0,.1);
}
*{
margin: 0;
padding: 0;
box-sizing: border-box;
text-decoration: none;
outline: none;
border: none;
text-transform: capitalize;
transition: all .2s linear;
}
html {
font-size: 62%;
scroll-padding-top: 5.5rem;
scroll-behavior: smooth;
}
.loader-container {
position:fixed;
top: 0; left: 0;
height: 100%;
width: 100%;
z-index: 10000;
background: #fff;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.loader-container img{
width: 35rem;
}
.loader-container.fade-out{
top: 110%;
opacity: 0;
}
header {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: #a8b98a;
display: flex;
align-items: center;
justify-content: center;
}
.hover-underline-animation {
display: inline-block;
position: relative;
color: white;
}
.hover-underline-animation::after {
content: '';
position: absolute;
width: 100%;
transform: scaleX(0);
height: 2px;
bottom: 0;
left: 0;
background-color: white;
transform-origin: bottom right;
transition: transform 0.25s ease-out;
}
.hover-underline-animation:hover::after {
transform: scaleX(1);
transform-origin: bottom left;
}
header .navbar a{
font-size: 40px;
border-radius: .5rem;
padding: .5rem 1.5rem;
color: white;
text-decoration: none;
font-family: 'Hi Melody', cursive;
}
.navbar a:hover {
font-size:88px;
font-size-adjust: 20px;
}
img.shop-logo {
width: 650px;
border-radius: 50%;
margin-bottom: -0px;
border: 10px;
margin-top: 0;
}
body {
background: #a8b98a;
}
.about .row{
display: flex;
flex-wrap: wrap;
gap: 1.5rem;
align-items: center;
}
.about {
background: #fbe7d7;
padding-right: 10px;
padding: 20rem 9% 40rem 0rem;
}
.about .row .image {
flex: 1 1 45rem;
position: absolute;
display: block;
}
.about .row .image img{
max-width: 1250px;
max-height: inherit;
height: inherit;
width: inherit;
padding-top: 100px;
}
.about .row .content {
flex: 1 1 45rem;
}
.about h3{
text-align: end;
}
.about .row .content p{
color: #aa401b;
font-size: 45px;
text-align: center;
font-family: 'Hi Melody', cursive;
font-weight: bolder;
}
.line-1 {
margin-right: 80px;
padding-left: 0px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 100px;
line-height: 0;
}
.line-2 {
margin-left: 5px;
padding-left: 150px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;font-family: 'Hi Melody', cursive;
font-size: 100px;
line-height: 1;
}
.line-3 {
margin-left: 5px;
padding-left: 100px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 100px;
line-height: 1;
}
.line-4{
margin-left: 5px;
padding-left: 100px;
font-family: 'Hi Melody', cursive;
font-weight:bolder;
color: #d45a28;
font-size: 40px;
line-height: 1;
}
.share {
color: #d45a28;
font-weight: bolder;
font-size: 20px;
float:right;
padding-top: 80px;
text-decoration: none;
font-family: 'Hi Melody', cursive;
padding-top: 250px;
}
.share a {
color: #d45a28;
text-decoration: none;
font-weight: bolder;
}
.sub-heading {
color: black;
text-align: center;
margin-top: 30px;
padding-top: 20px;
}
.heading {
color: black;
text-align: center;
}
.order form {
max-width: 90rem;
border-radius: .5rem;
box-shadow: var(--box-shadow);
border: .1rem solid rgba(0,0,0,.2);
background: #fff;
padding: 1.5rem;
margin: 0 auto;
}
.order form .inputBox {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
}
.order form .inputBox .input {
width: 49%;
}
.order form .inputBox .input span{
display: block;
padding: .5rem 0;
font-size: 1.5rem;
color: var(--light-color);
}
.order form .inputBox .input input,
.order form .inputBox .input textarea{
background: #eee;
border-radius: .5rem;
padding: 1rem;
font-size: 1.6rem;
color: var(--black);
text-transform: none;
margin-bottom: 1rem;
width: 100%;
}
.order form .inputBox .input input:focus,
.order form .inputBox .input textarea:focus{
border: 1rem solid var(--green);
}
.order form .inputBox .input textarea{
height: 20rem;
resize: none;
}
.order form .btn {
margin-top: 0;
}
.order {
padding-bottom: 20px;
}
.footer .box-container{
display: grid;
grid-template-columns: repeat(auto-fit, minmax(25rem, 1fr));
gap: 1.5rem;
text-align: center;
}
.footer .box-container .box{
padding: 5rem 0;
font-size: 2.5rem;
color: var(--black);
}
.footer .box-container a{
display: block;
padding: 5rem 0;
font-size: 1.5rem;
color: var(--light-color);
text-decoration: none;
}
.footer .box-container a:hover{
color: black;
text-decoration: none;
}
.footer .credit {
text-align: center;
border-top: .1rem solid rgba(0,0,0,.1);
font-size: 2rem;
color: var(--black);
padding: .5rem;
padding-top: 1.5rem;
margin-top: 1.5rem;
}
.footer .credit span {
color: black;
}
.footer {
background: #fbe7d7;
}
\\\\ Order CSS \\\\\
.order .sub-heading {
color: white;
}
.order .heading {
color: white;
}
.catering {
color: #d45a28;
text-align: right;
font-size: 20px;
padding-top: 40px;
padding-right: 10px;
font-weight: bold;
font-family: 'Times New Roman';
}
#media (max-width:991px){
html {
font-size: 55%;
}
header{
padding: 1rem 2rem;
}
section{
padding: 2rem;
}
}
#media (max-width:850px){
.about {
display: block;
text-align: center;
padding-bottom: 900px;
}
.content {
text-align: end;
}
.catering {
text-align: center;
}
p .share {
text-align: center;
}
.about .row .image img {
display: block;
position:absolute;
padding-top: 150px;
justify-content: center;
height: auto;
margin-right: 10px;
}
.share{
padding-left: 5000px;
}
}
#media (max-width:800px){
header .icon #menu-bars{
display: inline-block;
}
header .navbar {
position: absolute;
top: 100%; left: 0; right: 0;
background: #a8b98a;
border-top: .1rem solid rgba(0,0,0,.2);
border-bottom: .1rem solid rgba(0,0,0,.2);
padding: 1rem;
clip-path: polygon(0 0, 100% 0, 100% 0, 0 0);
}
header .navbar.active{
clip-path: polygon(0 0, 100% 0, 100% 100%, 0% 100%);
}
header .navbar a{
display: block;
padding: 1.5rem;
margin: 1rem;
font-size: 2rem;
background: #eee;
}
.image {
display: block;
text-align: center;
}
.about .row .image img{
height: auto;
width: 40%;
margin-left: 200px;
}
.home .home-slider .slide .content h3{
font-size: 5rem;
}
.about h3{
text-align:center;
font-size: 2rem;
}
}
#media (max-width:400px){
html {
font-size: 50%;
}
.dishes .box-container .box img {
height: auto;
width: 100%;
}
.order form .inputBox .input {
width: 100%;
}
.about {
display: block;
text-align: center;
}
.content {
text-align: end;
}
.catering {
text-align: center;
}
p .share {
text-align: center;
}
.about .row .image img {
display: block;
position:absolute;
padding: 200px 0 200px 0;
justify-content: center;
height: auto;
margin-right: 1000px;
}
}
Please check this https://www.w3schools.com/css/css3_mediaqueries.asp for learning CSS responsiveness and media queries.
Also check this one please: https://www.w3schools.com/css/css_rwd_mediaqueries.asp
<!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.11.2/css/all.css">
<title>Contact Us</title>
<style>
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
.hero {
width: 100%;
height: 100vh;
background-image: linear-gradient(black 0%, black 34%, white 34%, white 100%);
position: relative;
padding: 0 5%;
display: flex;
align-items: center;
justify-content: center;
overflow: auto;
}
nav {
width: 100%;
position: absolute;
top: 0;
left: 0;
padding: 20px 8%;
display: flex;
align-items: center;
justify-content: space-between;
}
nav .logo {
width: 100px;
margin-left: -80px;
}
nav ul li {
list-style: none;
display: inline-block;
margin-left: 40px;
}
nav ul li a {
text-decoration: none;
color: #fff;
font-size: 17px;
}
.content {
text-align: left;
}
.content h1{
font-size: 70px;
color: rgb(255, 255, 255);
font-weight: 600;
transition: 0.5s;
margin-bottom: 700px;
}
.content h1:hover{
-webkit-text-stroke: 2px #fff;
color: transparent;
}
.banner {
position: relative;
width: 90%;
margin: 50px auto;
}
.heading {
position: absolute;
top: 50%;
width: 50%;
margin-top: -400px;
margin-left: 650px;
text-align: center;
font-size: 3rem;
}
.food{
width: 400px;
position:absolute;
margin-top: -500px;
margin-left: 580px;
opacity: 0.4;
transition: opacity .3s ease;
background-color: rgba(0,0,0,0.6);
}
.contact-info{
display: inline;
width: 100%;
max-width: 1200px;
align-items: center;
justify-content: center;
padding: 0 20px;
margin-top: 320px;
}
.card{
background: #fff;
padding: 0 20px;
margin: 0 10px;
width: calc(33% - 20px);
height: 200px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
color: rgb(0, 0, 0);
cursor: pointer;
}
.card-icon{
font-size: 28px;
background: #ff6348;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px !important;
border-radius: 50%;
transition: 0.3s linear;
}
.card:hover .card-icon{
background: none;
color: #ff6348;
transform: scale(1.6);
}
.card p{
margin-top: 20px;
font-weight: 300;
letter-spacing: 2px;
max-height: 0;
opacity: 0;
transition: 0.3s linear;
}
.card:hover p{
max-height: 40px;
opacity: 1;
}
.contact{
position: relative;
min-height: 100vh;
padding: 50px 100px;
display: inline;
justify-content: center;
align-items: center;
flex-direction: column;
}
.contactform {
width: 500px;
padding: 10px;
background: #fff;
margin-top: 280px;
}
.contatform h2 {
font-size: 30px;
color: #333;
font-weight: 500;
}
.contactform .inputBox{
position: relative;
width: 100%;
margin-top: 10px;
}
.contactform .inputBox input,
.contactform .inputBox textarea{
width: 100%;
padding: 5px 0;
font-size: 16px;
margin: 10px 0;
border: none;
border-bottom: 2px solid #333;
outline: none;
resize: none;
}
.contactform .inputBox input [type="submit"]
{
width: 100px;
background: #00bcd4;
color: #fff;
border: none;
cursor: pointer;
padding: 10px;
font-size: 18px;
}
.map iframe {
width: 300px;
height: 400px;
display: flex;
flex-direction: row;
margin-top: 100px;
}
#media (max-width: 991px)
{
.contact{
padding:50px;
}
.container {
flex-direction: column;
}
.container .contact-info2 {
margin-bottom: 40PX;
}
.container .contact-info2,
.contatform{
width: 100%;
}
}
#media screen and (max-width:800px) {
.contact-info{
flex-direction: column;
}
.card{
width: 100%;
max-width: 300px;
margin: 10px 0;
}
}
footer {
text-align: center;
background-color: rgb(29, 17, 17);
color: #fff;
padding: 12px;
position: absolute;
bottom: 0;
width: 100%;
margin-top: 40px;
}
</style>
</head>
<body>
<div class="hero">
<nav>
<img src="logo.png" class="logo">
<ul>
<li>Home</li>
<li>Photos</li>
<li>Menu</li>
<li>Contact Us</li>
</ul>
</nav>
<div class="content">
<div class ="row">
<div class = "banner">
<img class="food" src="food.jpeg" alt="[food]">
<h1 class ="heading">Contact Us</h1>
</div>
</div>
</div>
<div class="contact-info">
<div class="card">
<i class="card-icon far fa-envelope"></i>
<p>Mehmet.under#gmail.com</p>
</div>
<div class="card">
<i class="card-icon fas fa-phone"></i>
<p>+4799221199</p>
</div>
<div class="card">
<i class="card-icon fas fa-map-marker-alt"></i>
<p>Karl Johans gate 5, 0154 OSLO</p>
</div>
</div>
<div class="map">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2000.2351438173973!2d10.
746176751774849!3d59.911644771148914!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416e89e0be32c5%
3A0xa9aad198e39ddef9!2sKarl%20Johans%20gate%205%2C%200154%20Oslo!5e0!3m2!1sno!2sno!4v1667850923403!5m2!1sno!2sno"
style="border:0;"
allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade">
</iframe>
</div>
<section class="contact">
<div class="contactform">
<form action="">
<h2>Send Message</h2>
<div class="inputBox">
<input type="text" name="" placeholder= "Full Name" required="required">
</div>
<div class="inputBox">
<input type="text" name="" placeholder="Email" required="required">
</div>
<div class="inputBox">
<textarea placeholder="Type Your Message" required="required"></textarea>
</div>
<div class="inputBox">
<input type="submit" name="" value="Send">
</div>
</div>
</form>
</section>
<footer>
<p>Just Turkey Grill is a 501c(3)
organization, and your contributions are tax
deductible.</p>
<p id="copyright">Copyright © 2022 by the Just Turkey Grill.
Questions?
<a href="mailto:Mehmet.under#gmail.com"
>Mail Mehmet Under.</a></p>
</footer>
<!-- footer -->
</div>
</body>
</html>
I did nothing special. The first second it worked and the other, it stopped being clickable. I need help straight away because I have to give in this task about 2 hours. The only thing I changed was the section area, but nothing more. I just changed the form and added back the map, and changed and added more css code.
Just add z-index: 1 to your navbar and should be work
With the inspector of your browser you can see that the "contact" section goes over the navbar, you have to put a higher z-index on the navbar so that it goes over it
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 can't seem to solve what was previously not a problem:
My navbar is fullwidth and mobile-y even above the breaking point
My grid boxes are not responsive on mobile even though I have set it to 1fr column and (6, fr) row.
https://codepen.io/arian-wardak/pen/QWKyzdj
<!DOCTYPE html>
<html lang='en'>
<head>
<meta charset="utf-8">
<title>Services - Quantum Marketing</title>
<link rel="stylesheet" type="text/css" href="css/quantum.css">
<link rel="stylesheet" type="text/css" href="css/reset.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<main>
<nav>
<ul>
<li>Home</li>
<li><a class="active" href="services.html">Services</a></li>
<li>Contact</li>
<li>Account</li>
<li>Cite</li>
</ul>
</nav>
<div class="grid-services">
<div class="grid-item item-1">
<img src=img/coding.png alt="Coding Icon" width="64" height="51">
<h4>Web Development</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-2">
<img src=img/search.png alt="Search Icon with a Dollar Sign" width="64" height="64">
<h4>Search Engine Optimization</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-3">
<img src=img/copywriting.png alt="Notepad and Pencil Icon" width=64 height=57>
<h4>Copywriting</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-4">
<img src=img/email.png alt="Email Icon" width=64 height=64>
<h4>Email Marketing</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-5">
<img src=img/social.png alt="Social Media Icon" width=64 height=45>
<h4>Social Media Marketing</h4>
<div class="button">Choose</div>
</div>
<div class="grid-item item-6">
<img src=img/retargeting.png alt="Bullseye Icon" width=64 height=64>
<h4>Retargeting</h4>
<div class="button">Choose</div>
</div>
</div>
</main>
<footer>
Copyright © 2020 Ariana Wardak. All Rights Reserved. | Privacy Policy Disclaimer | Designed by Ariana
</footer>
</body>
</html>
* {
box-sizing:border-box;
margin: 0;
font-family: 'Montserrat', sans-serif;
padding: 0;
outline: none;
}
body {
background-color: dimgray;
color: black;
}
main {
grid-area: main;
text-align:center;
overflow: hidden;
white-space: normal;
}
h1 {
padding: 20px;
color: white;
text-align: center;
}
h3 {
color: white;
text-align: center;
}
h4 {
padding: 30px;
color: white;
text-align: center;
}
.content {
margin: 0;
padding: 0;
background-color: white;
color: black;
}
.content img {
height: auto;
padding-right: 20px;
margin: 0;
}
nav {
overflow: hidden;
background-color: deepskyblue;
font-size: smaller;
}
ul {
display:block;
text-decoration: none;
text-align: center;
list-style: none;
float: right;
}
li {
float: left;
}
li a {
display: block;
color: white;
text-decoration: none;
font-weight: bold;
text-transform: uppercase;
padding: 15px;
}
li a:hover {
background-color: deepskyblue;
}
li a.active {
background-color: navy;
}
.hero {
text-align: center;
background-color: navy;
padding: 200px 0;
}
.faq {
padding: 50px;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
min-height: 300px;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
text-align: left;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
.grid-services {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 300px 300px;
padding: 20px;
height: 100vh;
grid-gap: 20px;
}
.grid-item {
background-color: navy;
padding: 20px;
}
button,
.button,
.button-services,
.button-contact {
background-color: deepskyblue;
display: inline-block;
padding:10px 25px;
margin: 15px 20px;
font-weight: bold;
border-radius: 5px;
color: white;
text-decoration: none;
}
button:hover,
.button:hover,
.button-services:hover,
.button-contact:hover {
background-color: dimgray;
color: deepskyblue;
cursor: pointer;
transition: all 0.1s ease;
}
.faq {
padding: 50px;
}
.accordion {
width: 90%;
max-width: 1000px;
margin: 2rem auto;
min-height: 300px;
}
.accordion-item {
background-color: #fff;
color: #111;
margin: 1rem 0;
border-radius: 0.5rem;
box-shadow: 0 2px 5px 0 rgba(0,0,0,0.25);
}
.accordion-item-header {
padding: 0.5rem 3rem 0.5rem 1rem;
min-height: 3.5rem;
line-height: 1.25rem;
font-weight: bold;
display: flex;
align-items: center;
position: relative;
cursor: pointer;
}
.accordion-item-header::after {
content: "\002B";
font-size: 2rem;
position: absolute;
right: 1rem;
}
.accordion-item-header.active::after {
content: "\2212";
}
.accordion-item-body {
max-height: 0;
overflow: hidden;
transition: max-height 0.2s ease-out;
}
.accordion-item-body-content {
padding: 1rem;
line-height: 1.5rem;
text-align: left;
border-top: 1px solid;
border-image: linear-gradient(to right, transparent, #34495e, transparent) 1;
}
.contact {
max-width: 700px;
margin: auto;
}
.form {
max-width: 700px;
text-align: center;
margin: 20px auto;
display: grid;
grid-template-columns: 1fr 1em 2fr;
grid-gap: 0.3em 0.6em;
grid-auto-flow: dense;
align-items: center;
}
input, label {
display: block;
}
textarea {
resize: vertical;
max-height: 300px;
}
.profile {
background-color: white;
padding: 20px;
margin: auto;
color: black;
max-width: 800px;
text-align: center;
}
.profile h4 {
color: black;
}
.citations {
background-color: white;
padding: 20px;
margin: auto;
color: black;
max-width: 800px;
text-align: center;
}
.wrapper{
position: relative;
width: 500px;
background-color: navy;
margin: auto;
}
.profile_card{
height: 400px;
background: navy;
padding: 50px 25px;
position: relative;
z-index: 1;
padding: 20px;
}
.profile_card{
color: #fff;
text-align: center;
}
.profile_card .profile_img img{
width: 80px;
border-radius: 50%;
display: block;
margin: 0 auto;
}
.profile_card .profile_img .name{
font-size: 24px;
font-weight: 500;
margin: 15px 0 5px;
}
.profile_card .profile_img .place{
font-size: 14px;
font-weight: 300;
}
.profile_card .place .icon{
margin-right: 10px;
}
.profile_icons{
display: flex;
margin: 30px 0;
justify-content: center;
}
.profile_icons .profile_item{
margin-right: 15px;
}
.profile_icons .profile_item:last-child{
margin-right: 0;
}
.profile_icons .icon,
.profile_icons .number{
font-size: 24px;
}
.profile_icons .title{
font-size: 12px;
text-transform: uppercase;
margin: 10px 0;
}
.profile_btn{
background-color: deepskyblue;
padding: 10px;
border-radius: 25px;
width: 200px;
margin: 0 auto;
color: white;
cursor: pointer;
}
.profile_btn:hover{
background: #ffc208;
}
.settings_btn{
width: 50px;
height: 52px;
position: absolute;
bottom: 20px;
left: 225px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
}
.settings_btn{
right: 0;
box-shadow: inset 2px -2px 3px ##00bfff;
}
.settings_btn:hover{
padding: 2px;
background-color: dimgray;
}
.profile_slider{
width: 325px;
height: 400px;
background: #fff;
color: #7b7a82;
position: absolute;
top: 25px;
left: 0;
font-size: 14px;
transition: bottom 0.2s ease;
}
.profile_slider li{
height: 80px;
border-bottom: 1px solid #eceff4;
padding: 15px;
}
.profile_slider li:last-child{
border-bottom: 0;
}
.profile_slider li .slider_item,
.profile_slider li .slider_left{
display: flex;
}
.profile_slider li .slider_item{
justify-content: space-between;
align-items: center;
height: 100%;
}
.profile_slider img{
width: 35px;
border-radius: 50%;
margin-right: 10px;
}
.profile_slider .item{
text-align: left;
font-size: 12px;
}
.profile_slider .item_email{
font-weight: 300;
margin-top: 5px;
}
.profile_slider .btn{
width: 100px;
padding: 8px 10px;
border-radius: 25px;
cursor: pointer;
font-size: 12px;
text-align: center;
}
.profile_slider .btn.btn_following{
background: #6a60c3;
color: #fff;
}
.profile_slider .btn.btn_following:hover{
background: #8178d1;
}
.profile_slider .btn.btn_follow{
border: 1px solid #7b7a82;
}
.profile_slider .btn.btn_follow:hover{
color: #fff;
background: #7b7a82;
}
.profile_slider.active{
left: 100%;
}
.settings_btn.active{
background: #00bfff;
}
.settings_btn i{
transition: transform 0.2s ease;
}
.settings_btn.active i{
transform: rotate(360deg);
}
.citations h4 {
color: black;
}
footer {
margin-bottom: 120px;
padding: 6px;
background-color: deepskyblue;
color: #ffffff;
text-align: center;
font-size: smaller;
}
#media screen and (max-width: 400px) {
nav {
float: none;
}
}
ul {
float: none;
}
li {
float: none;
width: 100%;
padding: 0;
}
.hero {
text-align: center;
padding: 180px 20px;
}
.connect {
margin: 0;
background-color: white;
color: black;
}
.connect img {
padding: 50px;
}
.content {
padding: 20px 8px;
}
}
.grid-services {
grid-template-columns: 1fr;
height: auto;
grid-template-rows: repeat(6, 1fr);
height: auto;
}
.form {
display: flex;
flex-direction: row;
color: white;
}
.form label {
flex: none;
display: block;
width: 250px;
font-weight: bold;
font-size: 1em;
display: inline-block;
}
.form label.right-inline {
text-align: right;
padding-right: 8px;
padding-left: 10px;
width: 300px;
}
.form .input-control {
flex: 1 1 auto;
display: block;
margin-bottom: 10px;
margin-right: 8px;
padding: 4px;
margin-top: -4px;
}
footer {
grid-area: footer;
margin: 0;
padding: 6px;
background-color: deepskyblue;
color: #ffffff;
text-align: center;
font-size: smaller;
}
You can use the Bootstrap class navbar; it already has breakpoints defined so you can have a presentable grid box at a small webpage size.
I use menu that was created by other developer in our company. I add to the first item of the menu dropdown selection, but the problem that the dropdown box not fully fill the all the item and I can't make it fill.
Here is HTML:
<div class="main-container-top-menu scroll1" id="main-container-top-menu">
<div class="top-menu-item-container-empty">
<div style="width: 50px"></div>
</div>
<div class="top-menu-item-container">
<div class="inactive-border-bottom">
<p class="control has-icons-left is-expanded">
<span class="select is-fullwidth ">
<select class="full-height">
<option>dropdown</option>
<option>options 1</option>
</select>
</span>
<span class="icon is-small is-left"><i class="far fa-building"></i></span>
</p>
</div>
</div>
<div class="top-menu-item-container" >
<div>
<div class="top-menu-item">2. Lot and Model</div>
</div>
</div>
<div class="top-menu-item-container" >
<div [className]="ishpExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">3. Home Plan</div>
</div>
</div>
<div class="top-menu-item-container">
<div [className]="isupgExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">4. Upgrades</div>
</div>
</div>
<div class="top-menu-item-container">
<div [className]="isnextExpanded?'active-border-bottom':'inactive-border-bottom'">
<div class="top-menu-item">5. Next Steps</div>
</div>
</div>
<div class="top-menu-icon-container">
<i class="fas fa-print top-menu-icon"></i>
<i class="fas fa-share-alt top-menu-icon"></i>
</div>
</div>
And here is CSS:
.scroll1::-webkit-scrollbar {
width: 0px;
height: 3px;
}
.scroll1::-webkit-scrollbar-track {
background: #eff0f0;
}
.scroll1::-webkit-scrollbar-thumb {
background: #666;
}
.main-container-top-menu {
scrollbar-width: auto;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.top-menu-item-container-empty {
border-bottom: 2px solid #eff0f0;
font-family: "Roboto", sans-serif;
border-right: 2px solid #eff0f0;
box-sizing: border-box;
color: #626262;
font-size: 14px;
font-weight: 350;
user-select: none;
justify-content: space-between;
}
.top-menu-item-container {
border-bottom: 2px solid #eff0f0;
font-family: "Roboto", sans-serif;
border-right: 2px solid #eff0f0;
box-sizing: border-box;
color: #626262;
font-size: 14px;
font-weight: 350;
user-select: none;
flex: 1;
justify-content: space-between;
}
.active-border-bottom {
align-items: center;
display: flex;
padding-left: 20px;
padding-right: 20px;
height: 100%;
border-bottom: 3px solid #eb2028;
box-sizing: border-box;
}
.inactive-border-bottom {
align-items: center;
display: flex;
padding-left: 20px;
padding-right: 20px;
height: 100%;
}
.top-menu-item-active {
cursor: pointer;
font-family: "Roboto", sans-serif;
padding: 5px;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
color: #1d1d1d;
font-size: 14px;
font-weight: 350;
user-select: none;
align-items: center;
justify-content: center;
display: flex;
stroke-width: 0.6px;
-webkit-text-stroke-width: 0.6px;
flex: 1;
}
.top-menu-item {
cursor: pointer;
padding: 10px;
font-family: "Roboto", sans-serif;
box-sizing: border-box;
color: #626262;
font-size: 14px;
user-select: none;
align-items: center;
justify-content: center;
display: flex;
flex: 1;
}
.top-menu-item-first {
cursor: default;
border-right: 2px solid #eff0f0;
font-size: 14px;
padding-right: 20px;
font-weight: 800;
border-bottom: 2px solid #eff0f0;
border-left: none;
text-align: left;
justify-content: left;
flex: 1;
}
.top-right-menu-item {
/* margin-right: 50px; */
border-bottom: 2px solid #eff0f0;
height: 100%;
display: inline-flex;
justify-content: flex-end;
align-items: center;
}
.top-item-logo {
height: 55px;
z-index: 100;
width: 55px;
object-fit: contain;
}
.top-menu-icon-container{
display: flex;
align-items: center;
justify-content: center;
}
.top-menu-icon {
cursor: pointer;
margin-right: 25px;
margin-left: 25px;
cursor: pointer;
width: 14px;
padding-top: 25px;
padding-bottom: 25px;
}
.left-arrow,
.right-arrow {
display: none;
}
#media screen and (max-width: 768px) {
.constructor-top-container {
justify-content: center;
padding-left: 3%;
}
}
#media screen and (max-width: 1088px) {
.top-right-menu-item {
padding-left: 10px;
margin-right: 0px;
border-bottom: 2px solid #eff0f0;
flex: 1;
height: 100%;
display: inline-flex;
justify-content: flex-end;
align-items: center;
}
.main-container-top-menu {
padding-left: 0;
padding-right: 0;
padding-bottom: 3px;
}
}
#media screen and (max-width: 414px) {
.top-menu-icon {
margin-right: 15px;
cursor: pointer;
width: 14px;
padding-top: 12px;
}
.scroll1::-webkit-scrollbar {
width: 0px;
height: 0px;
}
.scroll1::-webkit-scrollbar-track {
background: #eff0f0;
}
.scroll1::-webkit-scrollbar-thumb {
background: #666;
}
.top-menu-item-first {
padding-left: 35px;
}
.main-container-top-menu {
transition: 0.2s all;
min-height: 62px;
}
.top-item-logo {
position: absolute;
top: 0;
right: 0px;
margin: 0;
padding: 0;
z-index: 100;
height: 62px;
width: 62px;
object-fit: contain;
}
.left-arrow {
height: 60px;
padding-left: 5px;
padding-right: 5px;
background: white;
display: flex;
align-items: center;
position: absolute;
cursor: pointer;
color: #d1d1d1;
top: 0px;
font-size: 1.6rem;
left: 0;
z-index: 5;
padding-left: 7px;
}
.right-arrow {
height: 60px;
padding-left: 5px;
padding-right: 5px;
background: white;
display: flex;
align-items: center;
position: absolute;
cursor: pointer;
color: #b1b1b1;
font-size: 1.6rem;
left: calc(100% - 88px);
}
}
#media screen and (max-width: 1088px) {
.main-container-top-menu {
overflow-x: auto;
overflow-y: hidden;
/* display: block; */
width: 100%;
white-space: nowrap !important;
}
}
#media screen and (max-width: 414px) {
.main-container {
padding-left: 0px;
padding-right: 0px;
}
}
.no-suite-title {
text-transform: uppercase;
font-size: 1.3em;
font-weight: 300;
position: absolute;
left: 10%;
top: 50%;
z-index: 1000;
}
Workink jsFiddle!
How can I make dropdown to fill the menuc without gaps?
Update
Text moved to the left:
To get the desired result, you need to do the following:
Remove padding-left: 20px and padding-right: 20px from the .inactive-border-bottom selector;
Add height: 100% to these selectors - .control and .select.is-fullwidth.
Need to register .full-height in your css, and write the rule height: 100%!important in it. !important is necessary because this rule overrides the height: 2.5em rule in the .select select.