Reputation: 176
I have this pretty crowded design which I'm having trouble to make responsive. Basically with the "max-width:1024px" media query the whole layout fits when when in mobile mode, as this mode tries to fit everything in the window, if I've understood correctly.
The problem is that for the same screen size but whithout the mobile mode, it doesn't fit at all. If in the media query I make the height of the window bigger, lets say 140vh, then if works well on desktop but on mobile mode all the elements are too far appart.
Basically I wonder how to make a layout work for mobiles and desktops of the same size.
here is the code :
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');
:root {
--primary: #252b42;
--green: #1eb589;
--red: #dc414c;
--blue: #1da1f2;
--bc: #20222f;
--text-light: #8c98c6;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* TOOLS */
.grid {
display: grid;
}
.flex {
display: flex;
}
.font-white {
color: white;
}
.font-grey {
color: var(--text-light);
}
.font-green {
color: var(--green);
}
.font-red {
color: var(--red);
}
/* FONTS */
html {
font-size: 14px;
font-family: 'Inter', sans-serif;
}
h1 {
font-size: 2rem;
font-weight: bold;
}
h2 {
font-size: 1rem;
font-weight: bold;
}
h3 {
font-size: 0.9rem;
font-weight: bold;
}
h4 {
font-size: 4rem;
font-weight: bold;
line-height: 48px;
letter-spacing: -2px;
}
h5 {
font-weight: 400;
letter-spacing: 5px;
}
h6 {
font-size: 0.9rem;
font-weight: bold;
}
.number {
font-size: 2.3rem;
font-weight: bold;
}
/* ///////////////////////////////////////////// */
/* BODY */
body {
background-color: var(--bc);
/* overflow-y: hidden; */
}
.wrapper {
flex-direction: column;
height: 100vh;
/* margin: 2rem auto 4rem; */
margin: 0 auto;
width: 80%;
justify-content: space-evenly;
}
/* Header */
header {
justify-content: space-between;
}
.dark-mode {
flex-direction: row;
align-items: center;
justify-self: space-between;
}
/* DASHBOARD */
.dashboard {
grid-template-columns: 1fr 1fr 1fr 1fr;
grid-template-rows: 1fr;
justify-content: space-between;
column-gap: 28px;
}
/* Grid items */
.dashboard .grid-item {
position: relative;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
/* width: 255px; */
height: 216px;
border-radius: 5px;
background-color: var(--primary);
}
.color {
height: 3px;
width: 100%;
display: fixed;
/* margin-top: -2rem; */
position: absolute;
top: 0;
border-radius: 5px 5px 0 0;
}
/* sticker colors */
#blue {
background-color: var(--blue);
}
#ig {
background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}
#red {
background-color: var(--red);
}
.network {
display: flex;
align-items: center;
}
.network .pseudo {
margin-left: 4px;
}
.followers {
align-items: center;
}
.number-followers {
text-align: center;
}
.unit {
margin-top: 1rem;
text-transform: uppercase;
text-align: center;
}
.today {
display: flex;
align-items: center;
}
.today img {
height: 4px;
margin-right: 5px;
}
/* OVERVIEW */
.overview {
grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-gap: 28px;
}
.overview .grid-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 125px;
border-radius: 5px;
background-color: var(--primary);
}
.top-half,
.bottom-half {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
align-items: center;
}
/* HOVER STATES */
.grid-item {
cursor: pointer;
transition: background 0.2s ease-in-out;
}
.grid-item:hover {
background-color: #333a55;
}
/* RESPONSIVENESS */
@media screen and(max-width: 1280px) {
html {
font-size: 13px;
}
/* .grid-item {
width: 215px;
} */
}
/* Smaller screens */
@media screen and (max-width: 1024px) {
.wrapper {
width: 90%;
/* height: 140vh; */
}
.grid {
grid-gap: 17px;
}
/* bottom grid */
.overview {
grid-template-columns: repeat(3, 1fr);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | [Challenge Name Here]</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="wrapper flex">
<header class="flex">
<div class="title">
<h1 class="title-1 font-white">Social Media Dashboard</h1>
<h2 class="font-grey">Total Followers: 23,004</h2>
</div>
<div class="dark-mode flex">
<h2 class="font-grey">Dark Mode</h2>
<button class="dark-mode-btn"></button>
</div>
</header>
<div class="dashboard grid">
<div class="grid-item flex">
<div class="color" id="blue"></div>
<div class="network">
<img src="./images/icon-facebook.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@nathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">1987</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">12 Today</h6></div>
</div>
<div class="grid-item flex">
<div class="color "id="blue"></div>
<div class="network">
<img src="./images/icon-twitter.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@nathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">1044</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">99 Today</h6></div>
</div>
<div class="grid-item flex">
<div class="color" id="ig" ></div>
<div class="network">
<img src="./images/icon-instagram.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@realnathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">11k</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1099 Today</h6 class="font-green"></div>
</div>
<div class="grid-item flex">
<div class="color" id="red"></div>
<div class="network">
<img src="./images/icon-youtube.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">Nathan F.</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">8239</h4>
<h5 class="unit font-grey">Subscribers</h5>
</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">144 Today</h6></div>
</div>
</div>
<h1 class="title-2 font-white">Overview - Today</h1>
<div class="overview grid">
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Page Views</h2>
<img src="./images/icon-facebook.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">87</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">3%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-facebook.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">52</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">2%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-instagram.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">5462</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">2257%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Profile Views</h2>
<img src="./images/icon-instagram.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">52k</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1375%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Retweets</h2>
<img src="./images/icon-twitter.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">117</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">303%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-twitter.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">507</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">553%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-youtube.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">107</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">19%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Total Views</h2>
<img src="./images/icon-youtube.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">1407</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">12%</h6></div>
</div>
</div>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Thomas M.</a>.
</div>
</div>
<script src="./app.js"></script>
</body>
</html>
Upvotes: 0
Views: 1057
Reputation: 21
For the responsive layout you can use grid auto-fit
like Raheel Junaid's answer. But also you can only use flex without display grid.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');
:root {
--primary: #252b42;
--green: #1eb589;
--red: #dc414c;
--blue: #1da1f2;
--bc: #20222f;
--text-light: #8c98c6;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* TOOLS */
.grid {
display: grid;
}
.flex {
display: flex;
}
.font-white {
color: white;
}
.font-grey {
color: var(--text-light);
}
.font-green {
color: var(--green);
}
.font-red {
color: var(--red);
}
/* FONTS */
html {
font-size: 14px;
font-family: 'Inter', sans-serif;
}
h1 {
font-size: 2rem;
font-weight: bold;
}
h2 {
font-size: 1rem;
font-weight: bold;
}
h3 {
font-size: 0.9rem;
font-weight: bold;
}
h4 {
font-size: 4rem;
font-weight: bold;
line-height: 48px;
letter-spacing: -2px;
}
h5 {
font-weight: 400;
letter-spacing: 5px;
}
h6 {
font-size: 0.9rem;
font-weight: bold;
}
.number {
font-size: 2.3rem;
font-weight: bold;
}
/* ///////////////////////////////////////////// */
/* BODY */
body {
background-color: var(--bc);
/* overflow-y: hidden; */
}
.wrapper {
flex-direction: column;
height: 100vh;
/* margin: 2rem auto 4rem; */
margin: 0 auto;
width: 80%;
justify-content: space-evenly;
}
/* Header */
header {
justify-content: space-between;
}
.dark-mode {
flex-direction: row;
align-items: center;
justify-self: space-between;
}
/* DASHBOARD */
.dashboard {
/* grid-template-columns: 1fr 1fr 1fr 1fr; */
/* grid-template-rows: 1fr; */
/* justify-content: space-between; */
/* column-gap: 28px; */
display: flex;
flex-wrap: wrap;
gap: 10px;
}
/* Grid items */
.dashboard .grid-item {
flex-basis: calc(calc(700px - 100%) * 9999);
flex-shrink: 1;
flex-grow: 1;
position: relative;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
/* width: 255px; */
height: 216px;
border-radius: 5px;
background-color: var(--primary);
}
.color {
height: 3px;
width: 100%;
display: fixed;
/* margin-top: -2rem; */
position: absolute;
top: 0;
border-radius: 5px 5px 0 0;
}
/* sticker colors */
#blue {
background-color: var(--blue);
}
#ig {
background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}
#red {
background-color: var(--red);
}
.network {
display: flex;
align-items: center;
}
.network .pseudo {
margin-left: 4px;
}
.followers {
align-items: center;
}
.number-followers {
text-align: center;
}
.unit {
margin-top: 1rem;
text-transform: uppercase;
text-align: center;
}
.today {
display: flex;
align-items: center;
}
.today img {
height: 4px;
margin-right: 5px;
}
/* OVERVIEW */
.overview {
/* grid-template-columns: repeat(4, 1fr);
grid-template-rows: 1fr;
grid-gap: 28px; */
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.overview .grid-item {
flex-basis: 300px;
flex-shrink: 1;
flex-grow: 1;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 125px;
border-radius: 5px;
background-color: var(--primary);
}
.top-half,
.bottom-half {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
align-items: center;
}
/* HOVER STATES */
.grid-item {
cursor: pointer;
transition: background 0.2s ease-in-out;
}
.grid-item:hover {
background-color: #333a55;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<!-- displays site properly based on user's device -->
<link
rel="icon"
type="image/png"
sizes="32x32"
href="./images/favicon-32x32.png"
/>
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | [Challenge Name Here]</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="wrapper flex">
<header class="flex">
<div class="title">
<h1 class="title-1 font-white">Social Media Dashboard</h1>
<h2 class="font-grey">Total Followers: 23,004</h2>
</div>
<div class="dark-mode flex">
<h2 class="font-grey">Dark Mode</h2>
<button class="dark-mode-btn"></button>
</div>
</header>
<div class="dashboard">
<div class="grid-item flex">
<div class="color" id="blue"></div>
<div class="network">
<img src="./images/icon-facebook.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@nathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">1987</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">12 Today</h6></div>
</div>
<div class="grid-item flex">
<div class="color "id="blue"></div>
<div class="network">
<img src="./images/icon-twitter.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@nathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">1044</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">99 Today</h6></div>
</div>
<div class="grid-item flex">
<div class="color" id="ig" ></div>
<div class="network">
<img src="./images/icon-instagram.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@realnathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">11k</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1099 Today</h6 class="font-green"></div>
</div>
<div class="grid-item flex">
<div class="color" id="red"></div>
<div class="network">
<img src="./images/icon-youtube.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">Nathan F.</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">8239</h4>
<h5 class="unit font-grey">Subscribers</h5>
</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">144 Today</h6></div>
</div>
</div>
<h1 class="title-2 font-white">Overview - Today</h1>
<div class="overview">
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Page Views</h2>
<img src="./images/icon-facebook.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">87</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">3%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-facebook.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">52</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">2%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-instagram.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">5462</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">2257%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Profile Views</h2>
<img src="./images/icon-instagram.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">52k</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">1375%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Retweets</h2>
<img src="./images/icon-twitter.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">117</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">303%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-twitter.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">507</div>
<div class="today"><img src="./images/icon-up.svg"></img><h6 class="font-green">553%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-youtube.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">107</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">19%</h6></div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Total Views</h2>
<img src="./images/icon-youtube.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">1407</div>
<div class="today"><img src="./images/icon-down.svg"></img><h6 class="font-red">12%</h6></div>
</div>
</div>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank"
>Frontend Mentor</a
>. Coded by <a href="#">Thomas M.</a>.
</div>
</div>
<script src="./app.js"></script>
</body>
</html>
The changes are:
.dashboard {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.dashboard .grid-item {
flex-basis: calc(calc(700px - 100%) * 9999);
flex-shrink: 1;
flex-grow: 1;
}
.overview {
display: flex;
flex-wrap: wrap;
gap: 10px;
}
.overview .grid-item {
flex-basis: 300px;
flex-shrink: 1;
flex-grow: 1;
}
I was adding flex-basis
, flex-shrink
, and flex-grow
properties to .dashboard and .overview children.
flex-basis
will sets the main size of flex item.flex-grow
and flex-shrink
that allows child to grow or shrink from its main size if the value is 1.flex-shrink
default value is 1flex-grow
default value is 0flex-shrink
value = 1flex-grow
value = 1flex-basis
value is invalid.calc(calc(700px - 100%) * 9999);
when the parent width hits < 700px the flex-basis
will have big value that will make parent only have one column. When the parent width is > 700px the basis value will be negative number, then the flex-basis
will sets to the default value which is auto.Upvotes: 2
Reputation: 587
auto-fill
and auto-fit
You have your code set up nicely! What's great about CSS Grid is you don't actually have to utilize @media
queries for the functionality you're looking for. Using the minmax()
function in CSS, along with the grid auto-fill
and auto-fit
, you can implement a responsive design that serves nicely with what you currently have.
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;700&display=swap');
:root {
--primary: #252b42;
--green: #1eb589;
--red: #dc414c;
--blue: #1da1f2;
--bc: #20222f;
--text-light: #8c98c6;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* TOOLS */
.grid {
display: grid;
}
.flex {
display: flex;
}
.font-white {
color: white;
}
.font-grey {
color: var(--text-light);
}
.font-green {
color: var(--green);
}
.font-red {
color: var(--red);
}
/* FONTS */
html {
font-size: 14px;
font-family: 'Inter', sans-serif;
}
h1 {
font-size: 2rem;
font-weight: bold;
}
h2 {
font-size: 1rem;
font-weight: bold;
}
h3 {
font-size: 0.9rem;
font-weight: bold;
}
h4 {
font-size: 4rem;
font-weight: bold;
line-height: 48px;
letter-spacing: -2px;
}
h5 {
font-weight: 400;
letter-spacing: 5px;
}
h6 {
font-size: 0.9rem;
font-weight: bold;
}
.number {
font-size: 2.3rem;
font-weight: bold;
}
/* ///////////////////////////////////////////// */
/* BODY */
body {
background-color: var(--bc);
/* overflow-y: hidden; */
}
.wrapper {
flex-direction: column;
height: 100vh;
/* margin: 2rem auto 4rem; */
margin: 0 auto;
width: 80%;
justify-content: space-evenly;
}
/* Header */
header {
justify-content: space-between;
}
.dark-mode {
flex-direction: row;
align-items: center;
justify-self: space-between;
}
/* DASHBOARD */
.dashboard {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
grid-template-rows: 1fr;
justify-content: space-between;
column-gap: 28px;
}
/* Grid items */
.dashboard .grid-item {
position: relative;
flex-direction: column;
align-items: center;
justify-content: space-evenly;
/* width: 255px; */
height: 216px;
border-radius: 5px;
background-color: var(--primary);
}
.color {
height: 3px;
width: 100%;
display: fixed;
/* margin-top: -2rem; */
position: absolute;
top: 0;
border-radius: 5px 5px 0 0;
}
/* sticker colors */
#blue {
background-color: var(--blue);
}
#ig {
background: linear-gradient(70deg, #df4896, #ee877e, #fdc366);
}
#red {
background-color: var(--red);
}
.network {
display: flex;
align-items: center;
}
.network .pseudo {
margin-left: 4px;
}
.followers {
align-items: center;
}
.number-followers {
text-align: center;
}
.unit {
margin-top: 1rem;
text-transform: uppercase;
text-align: center;
}
.today {
display: flex;
align-items: center;
}
.today img {
height: 4px;
margin-right: 5px;
}
/* OVERVIEW */
.overview {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
grid-template-rows: 1fr;
grid-gap: 28px;
}
.overview .grid-item {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
height: 125px;
border-radius: 5px;
background-color: var(--primary);
}
.top-half,
.bottom-half {
width: 80%;
height: 80%;
display: flex;
flex-direction: row;
justify-content: space-between;
text-align: center;
align-items: center;
}
/* HOVER STATES */
.grid-item {
cursor: pointer;
transition: background 0.2s ease-in-out;
}
.grid-item:hover {
background-color: #333a55;
}
/* RESPONSIVENESS */
@media screen and(max-width: 1280px) {
html {
font-size: 13px;
}
/* .grid-item {
width: 215px;
} */
}
/* Smaller screens */
@media screen and (max-width: 1024px) {
.wrapper {
width: 90%;
/* height: 140vh; */
}
.grid {
gap: 17px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1" />
<!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png" />
<link rel="stylesheet" href="style.css" />
<title>Frontend Mentor | [Challenge Name Here]</title>
<!-- Feel free to remove these styles or customise in your own stylesheet 👍 -->
<style>
.attribution {
font-size: 11px;
text-align: center;
}
.attribution a {
color: hsl(228, 45%, 44%);
}
</style>
</head>
<body>
<div class="wrapper flex">
<header class="flex">
<div class="title">
<h1 class="title-1 font-white">Social Media Dashboard</h1>
<h2 class="font-grey">Total Followers: 23,004</h2>
</div>
<div class="dark-mode flex">
<h2 class="font-grey">Dark Mode</h2>
<button class="dark-mode-btn"></button>
</div>
</header>
<div class="dashboard grid">
<div class="grid-item flex">
<div class="color" id="blue"></div>
<div class="network">
<img src="./images/icon-facebook.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@nathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">1987</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img>
<h6 class="font-green">12 Today</h6>
</div>
</div>
<div class="grid-item flex">
<div class="color " id="blue"></div>
<div class="network">
<img src="./images/icon-twitter.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@nathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">1044</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img>
<h6 class="font-green">99 Today</h6>
</div>
</div>
<div class="grid-item flex">
<div class="color" id="ig"></div>
<div class="network">
<img src="./images/icon-instagram.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">@realnathanf</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">11k</h4>
<h5 class="unit font-grey">FOLLOWERS</h5>
</div>
<div class="today"><img src="./images/icon-up.svg"></img>
<h6 class="font-green">1099 Today</h6 class="font-green">
</div>
</div>
<div class="grid-item flex">
<div class="color" id="red"></div>
<div class="network">
<img src="./images/icon-youtube.svg" alt="" class="social-icon" />
<h3 class="pseudo font-grey">Nathan F.</h3>
</div>
<div class="followers">
<h4 class="number-followers font-white">8239</h4>
<h5 class="unit font-grey">Subscribers</h5>
</div>
<div class="today"><img src="./images/icon-down.svg"></img>
<h6 class="font-red">144 Today</h6>
</div>
</div>
</div>
<h1 class="title-2 font-white">Overview - Today</h1>
<div class="overview grid">
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Page Views</h2>
<img src="./images/icon-facebook.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">87</div>
<div class="today"><img src="./images/icon-up.svg"></img>
<h6 class="font-green">3%</h6>
</div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-facebook.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">52</div>
<div class="today"><img src="./images/icon-down.svg"></img>
<h6 class="font-red">2%</h6>
</div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-instagram.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">5462</div>
<div class="today"><img src="./images/icon-up.svg"></img>
<h6 class="font-green">2257%</h6>
</div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Profile Views</h2>
<img src="./images/icon-instagram.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">52k</div>
<div class="today"><img src="./images/icon-up.svg"></img>
<h6 class="font-green">1375%</h6>
</div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Retweets</h2>
<img src="./images/icon-twitter.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">117</div>
<div class="today"><img src="./images/icon-up.svg"></img>
<h6 class="font-green">303%</h6>
</div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-twitter.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">507</div>
<div class="today"><img src="./images/icon-up.svg"></img>
<h6 class="font-green">553%</h6>
</div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Likes</h2>
<img src="./images/icon-youtube.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">107</div>
<div class="today"><img src="./images/icon-down.svg"></img>
<h6 class="font-red">19%</h6>
</div>
</div>
</div>
<div class="grid-item flex">
<div class="top-half">
<h2 class="font-grey">Total Views</h2>
<img src="./images/icon-youtube.svg" alt="" class="media-icon" />
</div>
<div class="bottom-half">
<div class="number font-white">1407</div>
<div class="today"><img src="./images/icon-down.svg"></img>
<h6 class="font-red">12%</h6>
</div>
</div>
</div>
</div>
<div class="attribution">
Challenge by
<a href="https://www.frontendmentor.io?ref=challenge" target="_blank">Frontend Mentor</a
>. Coded by <a href="#">Thomas M.</a>.
</div>
</div>
<script src="./app.js"></script>
</body>
</html>
The properties changed:
.overview {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.dashboard {
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}
auto-fit
behaviourThis allows you to have a responsive grid container without complex and excessive media queries (although your's weren't complex). Usually many have a problem where the grid-containers overflow the width of the screen, but it seems you have everything set up correctly.
If you'd like to explore grid auto-fill
and auto-fit
(and the differences that weren't discussed in this answer), check out this great article by CSS-Tricks.
Upvotes: 1