I am unable to get ellipsis working in CSS grid
I've tried the following:
Parent Grid Container:
overflow: hidden;
Child Grid Item:
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
Code Sample:
https://jsfiddle.net/eternalshenron/xvm82jpd/20/
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.overflow {
overflow: hidden;
}
#media only screen and (max-width: 480px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 80%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 75%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 70%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 70%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "location misc-details";
margin: 0%;
padding: 0%;
}
.location {
grid-area: location;
display: grid;
grid-template-columns: min-content 1fr;
grid-template-areas: "seperator from-to";
}
.from-to {
grid-area: from-to;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas: "location-1"
"location-2"
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: top;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-2;
align-self: flex-end;
justify-self: left;
text-align: left;
min-width: 0;
max-width: 100%;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-rows: min-content 1fr min-content;
grid-template-areas: "dot-start"
"line"
"dot-end";
}
.line {
width: 1px;
background-color: #ccc;
height: 100%;
border: 0px solid black;
justify-self: center;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
align-self: center;
}
.dot-end {
grid-area: dot-end;
justify-self: center;
align-self: center;
margin-bottom: 2.65em;
}
.misc-details {
grid-area: misc-details;
display: grid;
justify-self: right;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas: "vehicle-type"
"seperator-2"
"other-details";
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
width: 100%;
grid-template-columns: max-content;
grid-template-areas: "vehicle"
"load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
justify-self: center;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
justify-self: center;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 4em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
width: 100%;
justify-items: center;
align-items: center;
}
.gray-line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
#media only screen and (max-width: 1023px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 115%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 105%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "location misc-details";
margin: 0%;
padding: 0%;
}
.location {
grid-area: location;
display: grid;
grid-template-columns: min-content 1fr;
grid-template-areas: "seperator from-to";
}
.from-to {
grid-area: from-to;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas: "location-1"
"location-2";
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: top;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-2;
align-self: flex-end;
justify-self: left;
text-align: left;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-rows: min-content 1fr min-content;
grid-template-areas: "dot-start"
"line"
"dot-end";
}
.line {
width: 1px;
background-color: #ccc;
height: 100%;
border: 0px solid black;
justify-self: center;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
align-self: center;
}
.dot-end {
grid-area: dot-end;
justify-self: center;
align-self: center;
margin-bottom: 2.65em;
}
.misc-details {
grid-area: misc-details;
display: grid;
justify-self: right;
grid-template-columns: 1fr;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas: "vehicle-type"
"seperator-2"
"other-details";
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
width: 100%;
grid-template-columns: max-content;
grid-template-areas: "vehicle"
"load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
justify-self: center;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
justify-self: center;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 8em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
width: 100%;
justify-items: center;
align-items: center;
}
.gray-line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
#media only screen and (min-width: 1024px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 115%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 105%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-areas: "location location location location vehicle-type vehicle-type vehicle-type vehicle-type other-details other-details";
}
.location {
grid-area: location;
display: grid;
grid-template-columns: max-content 1fr max-content;
grid-template-areas: "location-1 seperator location-2";
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: center;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 15px;
padding-right: 10px;
grid-area: location-2;
align-self: center;
justify-self: right;
text-align: right;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-columns: min-content 1fr min-content;
grid-template-areas: "dot-start line dot-end";
}
hr.line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid black;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
}
.dot-end {
grid-area: dot-end;
grid-row: 1/2;
justify-self: center;
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
align-items: center;
justify-self: center;
justify-items: center;
grid-template-columns: max-content;
grid-template-areas: "vehicle"
"load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
padding-left: 1em;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 8em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
justify-items: center;
align-items: center;
}
.gray-line {
width: 60%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
<div class="card-container">
<div class="location">
<div class="from-to overflow">
<div class="location-1 ellipsis">
<div class="loc ellipsis">
<span class="h1-card">Thiruvananthapuram City</span><br>
<span class="h3-card">Thiruvananthapuram
<br>Kerala</span>
</div>
</div>
<div class="location-2">
<p class="loc ellipsis">
<span class="h1-card">Venkatanarasimharajuvaripeta</span><br>
<span class="h3-card">Chitoor
<br>Andhra Pradesh</span>
</p>
</div>
</div>
<div class="seperator">
<svg height="1.2em" width="1.2em" class="dot-start">
<circle cx="0.6em" cy="0.74em" r="0.4em" stroke="black" stroke-width="0.06em" fill="lightgreen" />
</svg>
<div class="line"></div>
<svg height="1.2em" width="1.2em" class="dot-end">
<circle cx="0.6em" cy="0.5em" r="0.4em" stroke="red" stroke-width="0.12em" fill="white" />
</svg>
</div>
</div>
<div class="misc-details">
<div class="vehicle-load">
<div class="vehicle">
<div class="vehicle-icon"> ICON ICON ICON </div>
<div class="vehicle-type"><span class="h2-card">Trailer</span><br>
<span class="h4-card">Load</span></div>
</div>
<div class="h2-card load-size">40' x 10' x 8' | 20 Tons</div>
</div>
<hr class="gray-line" />
<div class="other-details">
<div class="load-type h2-card">ODC Cargo</div>
<hr class="gray-line" />
<div class="loading-date h2-card">Tue | 22 Sep</div>
</div>
</div>
</div>
Add max-width:100% to avoid the overflow and min-width:0 to allow the shrink of the items:
.ellipsis {
...
min-width: 0;
max-width: 100%;
}
Make sure to add the class to location-1 and location-2
Full code
* {
box-sizing: border-box;
}
.ellipsis {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
min-width: 0;
max-width: 100%;
}
.overflow {
overflow: hidden;
}
#media only screen and (max-width: 480px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 80%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 75%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 70%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 70%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "location misc-details";
margin: 0%;
padding: 0%;
}
.location {
grid-area: location;
display: grid;
grid-template-columns: min-content 1fr;
grid-template-areas: "seperator from-to";
}
.from-to {
grid-area: from-to;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas: "location-1" "location-2"
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: top;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-2;
align-self: flex-end;
justify-self: left;
text-align: left;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-rows: min-content 1fr min-content;
grid-template-areas: "dot-start" "line" "dot-end";
}
.line {
width: 1px;
background-color: #ccc;
height: 100%;
border: 0px solid black;
justify-self: center;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
align-self: center;
}
.dot-end {
grid-area: dot-end;
justify-self: center;
align-self: center;
margin-bottom: 2.65em;
}
.misc-details {
grid-area: misc-details;
display: grid;
justify-self: right;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas: "vehicle-type" "seperator-2" "other-details";
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
width: 100%;
grid-template-columns: max-content;
grid-template-areas: "vehicle" "load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
justify-self: center;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
justify-self: center;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 4em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
width: 100%;
justify-items: center;
align-items: center;
}
.gray-line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
#media only screen and (max-width: 1023px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 115%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 105%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-areas: "location misc-details";
margin: 0%;
padding: 0%;
}
.location {
grid-area: location;
display: grid;
grid-template-columns: min-content 1fr;
grid-template-areas: "seperator from-to";
}
.from-to {
grid-area: from-to;
display: grid;
grid-template-rows: 1fr 1fr;
grid-template-areas: "location-1" "location-2";
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: top;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-2;
align-self: flex-end;
justify-self: left;
text-align: left;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-rows: min-content 1fr min-content;
grid-template-areas: "dot-start" "line" "dot-end";
}
.line {
width: 1px;
background-color: #ccc;
height: 100%;
border: 0px solid black;
justify-self: center;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
align-self: center;
}
.dot-end {
grid-area: dot-end;
justify-self: center;
align-self: center;
margin-bottom: 2.65em;
}
.misc-details {
grid-area: misc-details;
display: grid;
justify-self: right;
grid-template-columns: 1fr;
grid-template-rows: 1fr max-content 1fr;
grid-template-areas: "vehicle-type" "seperator-2" "other-details";
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
width: 100%;
grid-template-columns: max-content;
grid-template-areas: "vehicle" "load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
justify-self: center;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
justify-self: center;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 8em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
width: 100%;
justify-items: center;
align-items: center;
}
.gray-line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
#media only screen and (min-width: 1024px) {
nb-card-header {
border-bottom: none;
text-align: right;
padding: 0 1.25rem;
padding-top: 1rem;
}
.h1-card {
font-family: Open Sans, sans-serif;
font-weight: 550;
font-size: 115%;
color: #373737;
}
.h2-card {
font-family: Open Sans, sans-serif;
font-size: 105%;
font-weight: 550;
color: #373737;
}
.h3-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #545454;
}
.h4-card {
font-family: Open Sans, sans-serif;
font-size: 90%;
color: #373737;
}
.card-container {
display: grid;
grid-template-columns: repeat(10, 1fr);
grid-template-areas: "location location location location vehicle-type vehicle-type vehicle-type vehicle-type other-details other-details";
}
.location {
grid-area: location;
display: grid;
grid-template-columns: max-content 1fr max-content;
grid-template-areas: "location-1 seperator location-2";
}
.location-1 {
padding-left: 10px;
padding-right: 15px;
grid-area: location-1;
align-self: center;
justify-self: left;
text-align: left;
}
.location-2 {
padding-left: 15px;
padding-right: 10px;
grid-area: location-2;
align-self: center;
justify-self: right;
text-align: right;
}
.loc {
margin-bottom: 0px;
}
.seperator {
grid-area: seperator;
align-items: center;
display: grid;
grid-template-columns: min-content 1fr min-content;
grid-template-areas: "dot-start line dot-end";
}
hr.line {
width: 100%;
background-color: #ccc;
height: 1px;
border: 0px solid black;
}
.dot-start {
grid-area: dot-start;
justify-self: center;
}
.dot-end {
grid-area: dot-end;
grid-row: 1/2;
justify-self: center;
}
.vehicle-load {
grid-area: vehicle-type;
display: grid;
align-items: center;
justify-self: center;
justify-items: center;
grid-template-columns: max-content;
grid-template-areas: "vehicle" "load-size";
}
.vehicle {
grid-area: vehicle;
display: grid;
grid-template-columns: max-content min-content;
grid-template-areas: "vehicle-icon vehicle-type";
padding-bottom: 0.5em;
}
.vehicle-icon {
grid-area: vehicle-icon;
padding-right: 1em;
}
.vehicle-type {
grid-area: vehicle-type;
padding-left: 1em;
text-align: center;
align-self: center;
}
.load-size {
grid-area: load-size;
text-align: center;
padding-top: 0.5em;
}
img {
max-width: 8em;
}
.other-details {
grid-area: other-details;
display: grid;
grid-template-rows: 1fr min-content 1fr;
justify-items: center;
align-items: center;
}
.gray-line {
width: 60%;
background-color: #ccc;
height: 1px;
border: 0px solid #545454;
}
}
<div class="card-container">
<div class="location">
<div class="from-to overflow">
<div class="location-1 ellipsis">
<div class="loc ellipsis">
<span class="h1-card">Thiruvananthapuram City</span><br>
<span class="h3-card">Thiruvananthapuram
<br>Kerala</span>
</div>
</div>
<div class="location-2 ellipsis">
<p class="loc ellipsis">
<span class="h1-card">Venkatanarasimharajuvaripeta</span><br>
<span class="h3-card">Chitoor
<br>Andhra Pradesh</span>
</p>
</div>
</div>
<div class="seperator">
<svg height="1.2em" width="1.2em" class="dot-start">
<circle cx="0.6em" cy="0.74em" r="0.4em" stroke="black" stroke-width="0.06em" fill="lightgreen" />
</svg>
<div class="line"></div>
<svg height="1.2em" width="1.2em" class="dot-end">
<circle cx="0.6em" cy="0.5em" r="0.4em" stroke="red" stroke-width="0.12em" fill="white" />
</svg>
</div>
</div>
<div class="misc-details">
<div class="vehicle-load">
<div class="vehicle">
<div class="vehicle-icon"> ICON ICON ICON </div>
<div class="vehicle-type"><span class="h2-card">Trailer</span><br>
<span class="h4-card">Load</span></div>
</div>
<div class="h2-card load-size">40' x 10' x 8' | 20 Tons</div>
</div>
<hr class="gray-line" />
<div class="other-details">
<div class="load-type h2-card">ODC Cargo</div>
<hr class="gray-line" />
<div class="loading-date h2-card">Tue | 22 Sep</div>
</div>
</div>
</div>
Related
Hello everyone and a big thank you to everyone who tries to help us newcomers to code.
I am trying to vertically align my list items inside the navbar/grid item.
As you can see, the logo on the left stays there nicely vertically in the middle even if I resize the viewport. But the navigation buttons don't.
The logo and the list items belong to the same grid item.
they are both inline
they have the same identical instructions set to them
I would put everything inside a pen, but you can't see it there, you can only see it with inspect element and 50% zoom.
What am I missing?
Thank you!
* {
padding: 0;
box-sizing: border-box;
border-radius: 5px;
text-align: center;
}
body {
background: #F7DAD4;
}
.grid {
display: grid;
height: 98vh;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: 0.5fr 1fr 3.5fr 1fr;
grid-gap: 2vh;
grid-template-areas: "nav nav nav" "header header header" "left main right" "footer footer footer";
}
nav {
background: #0A3409;
color: #F7DAD4;
grid-area: nav;
position: relative;
}
.logo {
float: left;
position: relative;
left: 10vw;
top: 50%;
transform: translate(0, -50%);
}
.logo a {
color: #F7DAD4;
text-decoration: none;
font-family: arial black;
font-size: 2em;
}
ul {
float: right;
list-style: none;
}
ul li {
position: relative;
display: inline;
right: 10vw;
top: 50%;
transform: translate(0, -50%);
border: 1px solid white;
}
li a {
text-decoration: none;
color: #F7DAD4;
font-family: arial;
font-weight: bold;
font-size: 1.5em;
transition: 0.2s;
border-radius: initial;
padding: 0 20px;
}
li a:hover {
color: #0A3409;
background-color: #F7DAD4;
}
header {
background: #0A3409;
color: #F7DAD4;
grid-area: header;
}
.left {
background: #FD3A0F;
color: #F7DAD4;
grid-area: left;
}
main {
background: #559E54;
color: #0A3409;
grid-area: main;
}
.right {
background: #17B814;
color: #F7DAD4;
grid-area: right;
}
footer {
background: #0A3409;
color: #F7DAD4;
grid-area: footer;
}
#media only screen and (max-width: 768px) {
.grid {
grid-template-columns: 3fr 2fr;
grid-template-rows: 0.5fr 1fr 1.75fr 1.75fr 1fr;
grid-template-areas: "nav nav" "header header" "main left" "main right" "footer footer";
}
}
#media only screen and (max-width: 500px) {
.grid {
grid-template-columns: 1fr;
grid-template-rows: 0.5fr 1fr 3.5fr 1fr 1fr 1fr;
grid-template-areas: "nav" "header" "main" "left" "right" "footer";
}
}
<div class="grid">
<nav>
<div class="logo">
danctes
</div>
<ul>
<li>Funny</li>
<li>Relatable</li>
<li>Dark</li>
<li>Latest</li>
<li>Best</li>
</ul>
</nav>
<header>Header</header>
<div class="left">Left</div>
<main>Main</main>
<div class="right">Right</div>
<footer>Footer</footer>
</div>
Consider using Flexbox instead of transforms and float when positioning UI elements, I commented out the changes in the code, it should be easy for you read through
* {
margin:0; /* New */
padding: 0;
box-sizing: border-box;
border-radius: 5px;
text-align: center;
}
body {
background: #F7DAD4;
}
.grid {
display: grid;
height: 98vh;
grid-template-columns: 1fr 4fr 1fr;
grid-template-rows: 0.5fr 1fr 3.5fr 1fr;
grid-gap: 2vh;
grid-template-areas: "nav nav nav" "header header header" "left main right" "footer footer footer";
}
nav {
background: #0A3409;
color: #F7DAD4;
grid-area: nav;
position: relative;
/* NEW */
display: flex;
height: 100%;
}
.logo {
/* NEW */
display: flex;
height: 100%;
align-items: center;
/* Removed
/* float: left;
/* position: relative;
/* left: 10vw;
/* top: 50%;
/* transform: translate(0, -50%); */
}
.logo a {
color: #F7DAD4;
text-decoration: none;
font-family: arial black;
font-size: 2em;
}
ul {
list-style: none;
/* NEW */
display: flex;
margin-left: auto;
height: 100%;
align-items: center;
/* Removed
/* float: right; */
}
ul li {
border: 1px solid white;
/* Removed
/* position: relative; */
/* display: inline; */
/* right: 10vw; */
/* top: 50%; */
/* transform: translate(0, -50%); */
}
li a {
text-decoration: none;
color: #F7DAD4;
font-family: arial;
font-weight: bold;
font-size: 1.5em;
transition: 0.2s;
border-radius: initial;
padding: 0 20px;
}
li a:hover {
color: #0A3409;
background-color: #F7DAD4;
}
header {
background: #0A3409;
color: #F7DAD4;
grid-area: header;
}
.left {
background: #FD3A0F;
color: #F7DAD4;
grid-area: left;
}
main {
background: #559E54;
color: #0A3409;
grid-area: main;
}
.right {
background: #17B814;
color: #F7DAD4;
grid-area: right;
}
footer {
background: #0A3409;
color: #F7DAD4;
grid-area: footer;
}
#media only screen and (max-width: 768px) {
.grid {
grid-template-columns: 3fr 2fr;
grid-template-rows: 0.5fr 1fr 1.75fr 1.75fr 1fr;
grid-template-areas: "nav nav" "header header" "main left" "main right" "footer footer";
}
}
#media only screen and (max-width: 500px) {
.grid {
grid-template-columns: 1fr;
grid-template-rows: 0.5fr 1fr 3.5fr 1fr 1fr 1fr;
grid-template-areas: "nav" "header" "main" "left" "right" "footer";
}
}
<div class="grid">
<nav>
<div class="logo">
danctes
</div>
<ul>
<li>Funny</li>
<li>Relatable</li>
<li>Dark</li>
<li>Latest</li>
<li>Best</li>
</ul>
</nav>
<header>Header</header>
<div class="left">Left</div>
<main>Main</main>
<div class="right">Right</div>
<footer>Footer</footer>
</div>
I have the following code in my CSS that I was hoping would stack the different parts of my page on mobile devices. However, when I pull up the website in my iPhone browser (Safari), it just pulls up the desktop version of my page. Here's the CSS:
body {
display: grid;
grid-template-areas:
'header header header'
'nav article ads'
'nav footer footer';
grid-template-rows: 80px 1fr 70px;
grid-template-columns: 20% 1fr 15%;
grid-row-gap: 1px;
grid-column-gap: 1px;
height: 100vh;
margin: 0;
}
a {
color: #0ad05b;
text-decoration: none;
}
a:hover {
color: #e3eaee;
}
header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.2em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
font-size: 14px;
}
footer,
article,
nav,
div {
padding: 1.2em;
background: #061621;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
font-size: 14px;
}
textarea {
font-family: Arial, Helvetica, sans-serif;
}
#pageHeader {
grid-area: header;
}
#pageFooter {
grid-area: footer;
}
#mainArticle {
grid-area: article;
align-content: flex-start;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
}
#mainNav {
grid-area: nav;
}
#siteAds {
grid-area: ads;
}
/* Stack the layout on small devices/viewports. */
#media all and (max-width: 575px) {
body {
grid-template-areas:
'header'
'article'
'ads'
'nav'
'footer';
grid-template-rows: 80px 1fr 70px 1fr 70px;
grid-template-columns: 1fr;
}
}
.innerArticle {
height: 16vh;
width: 16vh;
}
.big-user-photo {
border-radius: 50%;
}
.userAvatar {
height: 3rem;
width: 3rem;
border-radius: 50%;
margin-right: 1rem;
}
.mainPage {
height: 3rem;
width: 3rem;
border-radius: 50%;
margin-right: 1rem;
}
.headerRight {
grid-area: header;
justify-self: right;
padding: 1.2em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
}
.right {
display: flex;
flex-direction: row;
flex-wrap: wrap;
padding: 0.5em;
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
}
.left {
background: #21313c;
font-family: Helvetica, Arial, sans-serif;
color: #e3eaee;
}
.form-user-photo {
height: 15rem;
width: 15rem;
}
.alert {
position: fixed;
top: 0;
left: 50%;
-webkit-transform: translateX(-50%);
transform: translateX(-50%);
z-index: 9999;
color: #fff;
font-size: 1.8rem;
font-weight: 400;
text-align: center;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
padding: 1.6rem 15rem;
-webkit-box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
box-shadow: 0 2rem 4rem rgba(0, 0, 0, 0.25);
}
.alert--success {
background-color: #0ad05b;
}
.alert--error {
background-color: #eb4d4b;
}
When I pull up the page on my phone, this is how it appears (screen capture from my iPhone):
I'm hoping someone can tell me what I'm missing. Thank you.
You have to add this tag to the <head> of your HTML to tell the browser to treat the responsiveness correctly.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Right from W3School,
The width=device-width part sets the width of the page to follow the screen-width of the device
More info here.
I have a button that adds items to the grid when pressed, it looks like this at the moment:
As you can see, the grid container is stretched full width...but I want it to be the same width as the button and to only get stretched as more items get added, like so:
is this possible with CSS grid?
document.querySelector('#add').addEventListener('click', function() {
document.querySelector('.grid').insertAdjacentHTML('afterbegin', '<div class="item"></div>');
});
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 20px;
background: #777;
padding: 20px;
}
.item {
height: 100px;
background: white;
}
#add {
width: 100px;
height: 100px;
background: #333;
color: white;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
}
<div class="grid">
<div id="add">+</div>
</div>
You can approximate this using flexbox:
document.querySelector('#add').addEventListener('click', function() {
document.querySelector('.grid').insertAdjacentHTML('afterbegin', '<div class="item"></div>');
});
.grid {
display: flex;
flex-wrap:wrap;
max-width:max-content; /* This will limit the container */
align-items: center;
background: #777;
padding:10px;
}
/* This is a hack to limit the grow effect*/
.grid:after {
content:"";
flex-grow:999;
}
/**/
.item {
height: 100px;
background: white;
flex-grow:1;
width:100px;
margin:10px;
}
#add {
width: 100px;
height: 100px;
background: #333;
color: white;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
}
<div class="grid">
<div id="add">+</div>
</div>
Or you consider some JS since you are already using JS:
var i=1;
document.querySelector('#add').addEventListener('click', function() {
document.querySelector('.grid').insertAdjacentHTML('afterbegin', '<div class="item"></div>');
i++;
document.querySelector('.grid').style.maxWidth=(i*100 + (i-1)*20)+'px';
});
.grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
grid-gap: 20px;
background: #777;
padding: 20px;
max-width:100px;
}
.item {
height: 100px;
background: white;
}
#add {
width: 100px;
height: 100px;
background: #333;
color: white;
font-size: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
border-radius: 50%;
}
<div class="grid">
<div id="add">+</div>
</div>
How do I get my .inner-container divs to span the width and height of the parent content div? codepen
.container {
height: 100%;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 40px 40px 40px;
grid-template-areas: "m h h" "m c c" "m f f";
}
.inner-container {
height: 100%;
display: grid;
grid-gap: 2px;
grid-template-columns: repeat(2, auto);
grid-template-rows: auto auto;
grid-template-areas: "one two" "three four"
}
.header {
grid-area: h;
background-color: #2b9083;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
grid-area: m;
background-color: #ff66cc;
display: flex;
justify-content: center;
align-items: center;
}
.content {
grid-area: c;
background-color: #66ccff;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
grid-area: f;
background-color: #65704e;
display: flex;
justify-content: center;
align-items: center;
}
.quadrant-one {
grid-area: one;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-two {
grid-area: two;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-three {
grid-area: three;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-four {
grid-area: four;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
width: 100%;
}
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-container">
<div class="quadrant-one">I</div>
<div class="quadrant-two">II</div>
<div class="quadrant-three">III</div>
<div class="quadrant-four">IV</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>
Set inner container width to 100%, you already have height set correctly.
.inner-container {
width:100%;
}
This will solve your issue:
Just add width: 100%; to .inner-container
.container {
height: 100%;
display: grid;
grid-gap: 3px;
grid-template-columns: repeat(3, 1fr);
grid-template-rows: 40px 40px 40px;
grid-template-areas:
"m h h"
"m c c"
"m f f";
}
.inner-container {
height: 100%;
width: 100%;
display: grid;
grid-gap: 2px;
grid-template-columns: repeat(2, auto);
grid-template-rows: auto auto;
grid-template-areas:
"one two"
"three four"
}
.header {
grid-area: h;
background-color: #2b9083;
display: flex;
justify-content: center;
align-items: center;
}
.menu {
grid-area: m;
background-color: #ff66cc;
display: flex;
justify-content: center;
align-items: center;
}
.content {
grid-area: c;
background-color: #66ccff;
display: flex;
justify-content: center;
align-items: center;
}
.footer {
grid-area: f;
background-color: #65704e;
display: flex;
justify-content: center;
align-items: center;
}
.quadrant-one {
grid-area: one;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-two {
grid-area: two;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-three {
grid-area: three;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
}
.quadrant-four {
grid-area: four;
display: flex;
justify-content: center;
align-items: center;
background-color: lightgray;
width: 100%;
}
<div class="container">
<div class="header">HEADER</div>
<div class="menu">MENU</div>
<div class="content">
<div class="inner-container">
<div class="quadrant-one">I</div>
<div class="quadrant-two">II</div>
<div class="quadrant-three">III</div>
<div class="quadrant-four">IV</div>
</div>
</div>
<div class="footer">FOOTER</div>
</div>
Hope this was helpful for you.
.inner-container {
width: inherit;
}
I have one simple HTML CSS page where I have 10 circles and when I hover on one circle it moves to right side of page and also displays the number written on it.everything is done by CSS transition and transform properties.
trasition works only for very 1st circle hover and only once ( even in codepen and SO inbuilt code panel behave differently) and after that, if we hover to next circle it keeps transforming but does not stay after a given interval.
it behaves sometimes only for even circle and sometimes for all.
what is the issue and how to fix?
* {
margin: 0;
padding: 0;
}
:root {
--bg-color: #454678;
--color__1: salmon;
--color__2: lightskyblue;
--color__3: khaki;
--color__4: thistle;
--color__5: mediumturquoise;
}
body {
background-color: indianred;
}
.container {
display: -ms-grid;
display: grid;
grid-template-rows: 2em auto;
grid-template-columns: auto;
grid-template-areas:
"header"
"main";
grid-gap: 2px;
background-color: white;
justify-content: safe left;
align-content: center;
}
header {
grid-area: header;
}
main {
display: grid;
grid-area: main;
grid-template-columns: auto;
grid-template-rows: repeat(8, 1fr);
grid-gap: 10px;
justify-items: start;
align-content: center;
padding: 10px;
}
.circle {
height: 2em;
width: 2em;
border-radius: 50%;
background-color: var(--color__3, khaki);
transition: all 1.5s ease-in-out;
padding: 1em;
margin: 0 10em;
display: grid;
align-items: center;
justify-items: center;
color: transparent;
font-size: 10px;
}
.circle:nth-child(even) {
background-color: var(--color__1);
}
.circle:hover {
-webkit-transform: translateX(100%);
transform: scale(2) translateX(50em);
background-color: var(--color__5, salmon);
color: white;
}
<div class="container">
<header>Press any Number</header>
<main>
<div class="circle">1</div>
<div class="circle">2</div>
<div class="circle">3</div>
<div class="circle">4</div>
<div class="circle">5</div>
<div class="circle">6</div>
<div class="circle">7</div>
<div class="circle">8</div>
</main>
</div>
Note: I am checking only with the latest chrome only.
The problem is that the circle is not hovered after it gets moved to the right. A possible solution would be to put it in a container, that stretches with the circle and bind the hover event to that container, see below.
* {
margin: 0;
padding: 0;
}
:root {
--bg-color: #454678;
--color__1: salmon;
--color__2: lightskyblue;
--color__3: khaki;
--color__4: thistle;
--color__5: mediumturquoise;
}
body {
background-color: indianred;
}
.container {
display: -ms-grid;
display: grid;
grid-template-rows: 2em auto;
grid-template-columns: auto;
grid-template-areas:
"header"
"main";
grid-gap: 2px;
background-color: white;
justify-content: safe left;
align-content: center;
}
header {
grid-area: header;
}
main {
display: grid;
grid-area: main;
grid-template-columns: auto;
grid-template-rows: repeat(8, 1fr);
grid-gap: 10px;
justify-items: start;
align-content: center;
padding: 10px;
}
.circle {
height: 2em;
width: 2em;
border-radius: 50%;
background-color: var(--color__3, khaki);
transition: all 1.5s ease-in-out;
padding: 1em;
margin: 0 10em;
display: grid;
align-items: center;
justify-items: center;
color: transparent;
font-size: 10px;
}
.circle:nth-child(even) {
background-color: var(--color__1);
}
.outer:hover .circle {
-webkit-transform: translateX(100%);
transform: scale(2) translateX(50em);
background-color: var(--color__5, salmon);
color: white;
}
<div class="container">
<header>Press any Number</header>
<main>
<div class="outer"><div class="circle">1</div></div>
<div class="outer"><div class="circle">2</div></div>
<div class="outer"><div class="circle">3</div></div>
<div class="outer"><div class="circle">4</div></div>
<div class="outer"><div class="circle">5</div></div>
<div class="outer"><div class="circle">6</div></div>
<div class="outer"><div class="circle">7</div></div>
<div class="outer"><div class="circle">8</div></div>
</main>
</div>