I’m trying to insert 2 buttons inside 2 divs.
All divs in my css have a display grid as assigned.
My question is why do the divs with class button-left and button-right expand to take all the space available, even if I did not tell them to have a width of 100% or width of 100vw?
To all other div I did specify to be 100vw but not this last one, so why do they keep expanding.
If I put display: block inside of them it works, but I don’t understand why do I have to specify that in the first place?
Here is my code:
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
div {
display: grid;
border: dotted 1px #ff0;
}
body {
background-color: #000;
color: #fff;
font-family: Montserrat, sans-serif;
background-image: url(/../../media/index0.jpg);
background-repeat: no-repeat;
background-color: #000;
background-size: cover;
}
.div-container {
border: solid 2px red;
height: 100vh;
width: 100vw;
}
.div-top-row {
border: solid 2px pink;
height: 65vh;
width: 100vw;
}
.div-bottom-row {
border: dotted 3px green;
height: 30vh;
width: 100vw;
grid-auto-flow: column;
}
.copyrights {
height: 5vh;
width: 100vw;
justify-items: center;
align-items: center;
font-size: 11px;
}
.btn {
transition: all 0.3s ease-in;
box-shadow: unset;
}
.btn-gradient {
border: none;
border-radius: 0.25rem;
color: #fff;
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
line-height: 1em;
padding: 0.875rem 1rem;
text-decoration: none;
transition: all 0.15s;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
}
.btn-blank-blue {
background: 0 0;
border: 1px solid #1e92e6;
color: #1e92e6;
}
.btn:hover {
border-color: transparent;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
background-position: 50% 0;
color: #22242f;
}<!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" />
<link rel="stylesheet" href="/../../css/index.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
<title>Home</title>
</head>
<body>
<div class="div-container">
<div class="div-top-row"></div>
<div class="div-bottom-row">
<div class="div-button-left">
<button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
</div>
<div class="div-button-right">
<button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
</div>
</div>
<div class="copyrights">
<p>© 2022 New Company Sample LLC - All rights reserved.</p>
</div>
</div>
</body>
</html>>Solution :
There seems to be an issue with Specificity.
Specificity is a weight that is applied to a given CSS declaration, determined by the number of each selector type in the matching selector.
You essentially answered your own question. display: block; works because that is the default display for div‘s. You have div { display: grid;} which changes the default display: block; on all of your div's.
display: grid; will try to use all available space. Hence, why your buttons are stretched. I would either put the grid on only applicable div‘s. Or, you could use the :not pseudo-class like so:
div:not(.div-button-right, .div-button-left) {
display: grid;
border: dotted 1px #ff0;
}
This will exclude the div‘s defined in the :not pseudo-class of those styles.
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
div {
border: dotted 1px #ff0;
}
body {
background-color: #000;
color: #fff;
font-family: Montserrat, sans-serif;
background-image: url(/../../media/index0.jpg);
background-repeat: no-repeat;
background-color: #000;
background-size: cover;
}
.div-container {
display: grid;
border: solid 2px red;
height: 100vh;
width: 100vw;
}
.div-top-row {
border: solid 2px pink;
height: 65vh;
width: 100vw;
}
.div-bottom-row {
display: grid;
border: dotted 3px green;
height: 30vh;
width: 100vw;
grid-auto-flow: column;
}
.copyrights {
display: grid;
height: 5vh;
width: 100vw;
justify-items: center;
align-items: center;
font-size: 11px;
}
.btn {
transition: all 0.3s ease-in;
box-shadow: unset;
}
.btn-gradient {
border: none;
border-radius: 0.25rem;
color: #fff;
display: inline-block;
font-size: 0.875rem;
font-weight: 600;
line-height: 1em;
padding: 0.875rem 1rem;
text-decoration: none;
transition: all 0.15s;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
}
.btn-blank-blue {
background: 0 0;
border: 1px solid #1e92e6;
color: #1e92e6;
}
.btn:hover {
border-color: transparent;
background: linear-gradient(45deg, #1e92e6, #60fbd0 75%, #1c6599 150%);
background-size: 300% 100%;
background-position: 50% 0;
color: #22242f;
}<!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" />
<link rel="stylesheet" href="/../../css/index.css" />
<link href="https://fonts.googleapis.com/css2?family=Montserrat&display=swap" rel="stylesheet" />
<link rel="icon" type="image/x-icon" href="/../../media/global0.ico" />
<title>Home</title>
</head>
<body>
<div class="div-container">
<div class="div-top-row"></div>
<div class="div-bottom-row">
<div class="div-button-left">
<button class="btn btn-gradient btn-blank-blue" onclick='window.open("https://www.gitbook.com/")'>Read Docs</button>
</div>
<div class="div-button-right">
<button class="btn btn-gradient" onclick='location.href="dashboard.html"'>Enter App</button>
</div>
</div>
<div class="copyrights">
<p>© 2022 New Company Sample LLC - All rights reserved.</p>
</div>
</div>
</body>
</html>