When I increase the px of the icon located on the cards (The Gaming Controller and the Question Mark) It will not change the actual size of the icon when I run the code, Is there any other way to increase the size of these icons or a solution to my problem in anyway? Thanks for the help guys!
Here is my code :)
<style>
* {
box-sizing: border-box;
}
body {
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
.shell {
height:65vh;
justify-content: center;
display: flex;
flex-direction: row;
flex-basis: auto;
margin: 5px;
align-items: center; /* Added */
}
.card {
display: inline-block;
width: 200px;
height: 150px;
border: 1px solid #EF9A9A;
border-radius: 4px;
margin: 5px;
text-decoration: none;
}
.card-header {
color: #D32F2F;
text-align: center;
font-size: 24px;
font-weight: 600;
border-bottom: 1px solid #EF9A9A;
background-color: #FFEBEE;
padding: 5px 10px;
}
.card-main {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 15px 0;
}
.material-icons {
font-size: 24px;
color: #D32F2F;
margin-bottom: 5px;
}
.main-description {
color: #D32F2F;
font-size: 24px;
text-align: center;
}
.header {
overflow: hidden;
background-color: #FFEBEE;
padding: 20px 10px;
border-bottom: 1px solid #EF9A9A;
border-radius: 4px;
}
.header a {
float: left;
color: #D32F2F;
text-align: center;
padding: 12px;
text-decoration: none;
font-size: 18px;
line-height: 25px;
border-radius: 4px;
}
.header a.logo {
font-size: 25px;
font-weight: bold;
}
.header a:hover {
background-color: #dfd5d7;
color: #942626;
}
.header a.active {
background-color: #D32F2F;
color: #FFEBEE;
}
.header-right {
float: right;
}
#media screen and (max-width: 500px) {
.header a {
float: none;
display: block;
text-align: left;
}
.header-right {
float: none;
}
</style>
<body>
<!DOCTYPE html>
<head>
<link rel="icon" type="png" href="/images/icon.png"/>
<meta charset="utf-8"/>
<title>Project-LuLo</title>
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<link rel="stylesheet" href="css/index.css">
</head>
<body>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Open+Sans:400,600" rel="stylesheet">
<div class="header">
Project-LuLo
<div class="header-right">
<a class="active" href="#home">Home</a>
Games
Contact
</div>
</div>
<div class="shell">
<a href = "#test"class="card">
<div class="card-header">Games</div>
<div class="card-main">
<i class="material-icons">videogame_asset</i>
<div class="main-description">Web Based Games</div>
</div>
</a>
<a href="#test"class="card">
<div class="card-header">Other</div>
<div class="card-main">
<i class="material-icons">question_mark</i>
<div class="main-description">Cool Random Stuff</div>
</div>
</a>
</div>
A way to fix are adding "!important" to font-size it will work change your icon size, for example:
.material-icons {
font-size: 30px!important;
color: #D32F2F;
margin-bottom: 5px;
}
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>
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>
I have come across a very odd issue, I have noticed that all of a sudden my anchors stopped working, as in became unclickable. Then I figured it must be something related to applied CSS, and when I started disabling parts of my CSS, I narrowed down the issue to this couple of lines:
.content {
width: 960px;
margin: auto;
}
My page structure looks like this:
<!DOCTYPE html>
<html>
<head>
<title>CoinShop v1.0</title>
<link rel="stylesheet" type="text/css" href="/static/pages/css/reset.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/navbar.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/base.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/searchbar.css">
<link rel="stylesheet" type="text/css" href="/static/pages/css/bootstrap.min.css">
<link rel="stylesheet" type="text/css" href="/static/products/css/detail.css">
</head>
<body>
<div class='top-grid'>
<div class='branding-grid-container'>
<div class='branding-grid'>
<div class='branding-grid-buttons-not-authenticated'>
<a href="/help/" class='button-help'>Help</a>
<a href="/accounts/register/" class='button-register'>Register</a>
<a href="/accounts/login/" class='button-login'>Login</a>
</div>
</div>
</div>
<div class='nav-grid'>
<div class='search-bar'>
<form action="/shop/" method="GET">
<input type="text" name="q" placeholder="Search" class='search-box'>
<input type="submit" value='Search' class='search-button'>
</form>
</div>
<div class='nav-bar'>
<nav>
<ul id='menu'>
<li class='menu-item'>Home</li>
<li class='menu-item'>Shop</li>
<li class='menu-item'>Contact</li>
<li class='menu-item'>About</li>
</ul>
</nav>
</div>
</div>
</div>
<div class='content'>
spam (2018)
<h1>spam (2018)</h1>
<p>eggs</p>
<p>Price: 200.00</p>
</div>
</body>
</html>
...and all applied CSS combined looks like this:
.top-grid {
margin: auto;
background-color: #3D005A;
}
.branding-grid-container {
background-color: #4e0e7c;
}
.branding-grid {
display: grid;
grid-template-columns: 1fr 1fr 400px;
height: 6em;
background-color: #4e0e7c;
margin: auto;
width: 960px;
}
.branding-grid-buttons-not-authenticated {
margin-top: 40px;
grid-column: 3;
width: 100%;
text-align: right;
}
.branding-grid-buttons-not-authenticated a {
border-style: solid;
border-radius: 0.5em;
border: none;
color: white;
font-size: 14px;
padding: 10px 20px;
margin-right: 10px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
.button-help {
background-color: #36c1d4;
}
.button-help:hover {
background-color: #2a99a8;
}
.button-register {
background-color: #FF9900;
}
.button-register:hover {
background-color: #FF6600;
}
.button-login {
background-color: #75C10A;
}
.button-login:hover {
background-color: #62a307;
}
.branding-grid-buttons-not-authenticated a:hover {
color: white;
text-decoration: none;
}
.branding-grid-buttons-authenticated {
margin-top: 50px;
grid-column: 3;
text-align: right;
}
.buttons-authenticated li {
display: inline-block;
padding-right: 20px;
}
.buttons-authenticated li a {
color: white;
}
.buttons-authenticated li a:hover {
color: #EC9419;
}
.nav-grid {
background-color: #3D005A;
position: relative;
display: grid;
grid-template-columns: 1fr 1fr;
margin: auto;
width: 960px;
height: 2.7em;
}
.search-bar {
margin-top: 6px;
}
.nav-bar {
margin-top: 5px;
margin-bottom: 30px;
text-align: right;
}
.above-form {
background-color: #f5f3f2;
color: #FF6600;
margin-bottom: 15px;
padding-left: 15px;
padding-top: 15px;
padding-bottom: 15px;
}
.error-wrapper {
background-color: #F2DEDE;
padding: 10px 20px;
margin-bottom: 15px;
color: #a94442;
font-size: 14px;
}
.close-button {
border: none;
background-color: #F2DEDE;
color: #a94442;
font-size: 21px;
font-weight: bold;
padding: 0;
}
.close-button:hover {
color: #685863;
}
ul#menu {
position: relative;
list-style-type: none;
margin: 0;
padding: 0;
}
.menu-item {
display: inline-block;
}
.menu-item > a {
float: left;
display: block;
padding: 0px 10px;
height: 30px;
text-align: center;
line-height: 30px;
color: #fff;
min-width: 80px;
text-decoration: none;
}
.menu-item > a:hover {
color: #EC9419;
text-decoration: none;
max-height: 30px;
}
.search-bar form { font-size: 0; }
.search-bar input {
display: inline-block;
height: 2em;
box-sizing: border-box;
font-size: 1rem;
}
.search-box {
border: none;
padding-left: 10px;
border-radius: 0.5em 0 0 0.5em;
}
.search-button {
background-color: #FF9900;
border-radius: 0 0.5em 0.5em 0;
border: none;
color: white;
padding: 0px 15px;
text-align: center;
text-decoration: none;
font-weight: bold;
}
.search-button:hover {
background-color: #FF6600;
}
.search-bar {
top: 0;
bottom: 0;
}
.content {
width: 960px;
margin: auto;
}
Here is the JS fiddle.
Why would this couple of lines cause such an issue? This has never occurred to me before.
In the fiddle removing those couple of lines doesn't resolve the issue, whilst in my original code my anchor becomes clickable once those two lines are removed.
I'm referring to spam (2018) anchor specifically which I have created for the purpose of this minimal example but I have more than one and they all don't work.
Try this:
.content {
width: 960px;
margin: auto;
padding-top: 20px;
}
Play with the value in padding-top until you're happy with it.
Fiddle: https://jsfiddle.net/mdvhyjs9/
By your request:
.search-bar {
margin-top: 6px;
height: 30px;
}
Play with the value in height until you like it.
I am trying to create a popover class of respective sections, but it is not aligning as symmetrically as desired.
I want it to look like this: https://www.screencast.com/t/DrbkBj36M
Here is my CSS/HTML. Help would be much appreciated.
.filters {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
text-align: right;
min-height: 70px;
max-height: 70px;
width: 100%;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding: 10px;
padding-right: 30px;
}
.locations {
border-right: #DDDDDD solid 1px;
}
.locations, .amenities {
height: 100%;
padding-left: 30px;
flex-grow: 1;
text-align: left;
}
h3 {
font-weight: 600;
line-height: .6;
}
h4 {
font-weight: 400;
font-size: 14px;
line-height: .6;
}
button {
border:none;
border-radius: 4px;
width: 20%;
height: 48px;
font-size: 18px;
background-color: #FF5A5F;
color: white;
margin: 0 30px 0 auto;
}
button:hover {
opacity: 0.9;
}
.popover {
position: absolute;
display: none;
width: inherit;
font-size: 16px;
background-color:#FAFAFA;
border: #DDDDDD 1px solid;
border-radius: 4px;
padding: 0 30px 30px 30px;
margin: 0;
}
.locations:hover .popover {
display: block;
}
.amenities:hover .popover {
display: block;
padding-top: 30px;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="4-common.css" media="all">
<link rel="stylesheet" type="text/css" href="6-filters.css" media="all">
<link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
</head>
<body>
<header>
</header>
<div class="container">
<section class="filters">
<div class="locations">
<h3>States</h3>
<h4>California, New York...</h4>
<ul class="popover">
<h2>California</h2>
<li>Berkeley</li>
<li>Los Angeles</li>
<li>San Francisco</li>
<h2>New York</h2>
<li>New York</li>
</ul>
</div>
<div class="amenities">
<h3>Amenities</h3>
<h4>Internet, kitchen...</h4>
<ul class="popover">
<h2>Amenities</h2>
<li>Fiber internets</li>
<li>Big stove</li>
<li>Cryogenic chamber</li>
</ul>
</div>
<button>Search</button>
</section>
</div>
</body>
</html>
Eh.. is this what you want?
.filters {
display: inline-flex;
flex-direction: row;
align-items: center;
justify-content: flex-end;
text-align: right;
height: 70px;
width: 100%;
border: 1px solid #DDDDDD;
border-radius: 4px;
padding-right: 30px;
}
.locations {
border-right: #DDDDDD solid 1px;
}
.locations, .amenities {
height: 100%;
padding-left: 30px;
flex-grow: 1;
text-align: left;
position: relative;
}
h3 {
font-weight: 600;
line-height: .6;
}
h4 {
font-weight: 400;
font-size: 14px;
line-height: .6;
}
button {
border:none;
border-radius: 4px;
width: 20%;
height: 48px;
font-size: 18px;
background-color: #FF5A5F;
color: white;
margin: 0 30px 0 auto;
}
button:hover {
opacity: 0.9;
}
.popover {
position: absolute;
top: 100%;
right: 0;
bottom: auto;
left: 0;
display: none;
width: inherit;
font-size: 16px;
background-color:#FAFAFA;
border: #DDDDDD 1px solid;
border-radius: 4px;
padding: 0 30px 30px 30px;
margin-top: 1px;
margin-left: -1px;
}
.amenities .popover
{
margin-left: -2px;
}
.locations:hover .popover {
display: block;
}
.amenities:hover .popover {
display: block;
padding-top: 30px;
}
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="4-common.css" media="all">
<link rel="stylesheet" type="text/css" href="6-filters.css" media="all">
<link rel="icon" type="image/x-icon" href="images/favicon.ico" sizes="16x16">
</head>
<body>
<header>
</header>
<div class="container">
<section class="filters">
<div class="locations">
<h3>States</h3>
<h4>California, New York...</h4>
<ul class="popover">
<h2>California</h2>
<li>Berkeley</li>
<li>Los Angeles</li>
<li>San Francisco</li>
<h2>New York</h2>
<li>New York</li>
</ul>
</div>
<div class="amenities">
<h3>Amenities</h3>
<h4>Internet, kitchen...</h4>
<ul class="popover">
<h2>Amenities</h2>
<li>Fiber internets</li>
<li>Big stove</li>
<li>Cryogenic chamber</li>
</ul>
</div>
<button>Search</button>
</section>
</div>
</body>
</html>