Responsive CSS Styles on Mobile Devices Only

Responsive css styles on mobile devices ONLY

What's you've got there should be fine to work, but there is no actual "Is Mobile/Tablet" media query so you're always going to be stuck.

There are media queries for common breakpoints , but with the ever changing range of devices they're not guaranteed to work moving forwards.

The idea is that your site maintains the same brand across all sizes, so you should want the styles to cascade across the breakpoints and only update the widths and positioning to best suit that viewport.

To further the answer above, using Modernizr with a no-touch test will allow you to target touch devices which are most likely tablets and smart phones, however with the new releases of touch based screens that is not as good an option as it once was.

How to detect ONLY with CSS mobile screens

The @media rule is used to define different style rules for different media types/devices.

If it doesnt work, check your code. you might have made a typo somewhere.

Example:

@media only screen and (max-device-width: 640px) {
/* Styles */
}

@media only screen and (max-device-width: 768px) {
/* Styles */
}

Earlier post:
How to code CSS media queries targeting ALL mobile devices and tablets?

W3schools: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

Display content only on mobile devices

Basically the viewport dimension for mobile phones and tablets fall under media query of (max-width: 991px), so you can update your code this way.

@media (max-width: 991px) { 
.mobileShow {display: block;}
}

However, some tablets have dimensions of 1024px width, so if you want to include them as well, you can use this code.

@media (max-width: 1024px) { 
.mobileShow {display: block;}
}

Responsive CSS works on mobile but not on desktop

CSS Grid 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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="Sample Image" 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>

Media Queries: How to target desktop, tablet, and mobile?

IMO these are the best breakpoints:

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

Edit: Refined to work better with 960 grids:

@media (min-width:320px)  { /* smartphones, iPhone, portrait 480x320 phones */ }
@media (min-width:481px) { /* portrait e-readers (Nook/Kindle), smaller tablets @ 600 or @ 640 wide. */ }
@media (min-width:641px) { /* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */ }
@media (min-width:961px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }

In practice, many designers convert pixels to ems, largely because ems afford better zooming. At standard zoom 1em === 16px, multiply pixels by 1em/16px to get ems. For example, 320px === 20em.

In response to the comment, min-width is standard in "mobile-first" design, wherein you start by designing for your smallest screens, and then add ever-increasing media queries, working your way onto larger and larger screens.

Regardless of whether you prefer min-, max-, or combinations thereof, be cognizant of the order of your rules, keeping in mind that if multiple rules match the same element, the later rules will override the earlier rules.



Related Topics



Leave a reply



Submit