how to assign a css value for mobile and desktop in one line

Question

I have HTML div with width of 190 px that's working normal for desktop but for mobile its not , is there a way to tell if connection is from desktop take this value else take this value ?

this is my code :

document.querySelector('.article').style.width ='190px';

Meet [Media Queries](https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries) — Mitya, Jan 18 '19 at 12:11
You can check out this reference https://stackoverflow.com/questions/3514784/what-is-the-best-way-to-detect-a-mobile-device-in-jquery — Varun Setia, Jan 18 '19 at 12:12
To clarify, if you set the width on the .article class instead of adding it inline, you can use a media query to state that .article has to be 190px when the screen is bigger than x and that .article is like 100% width when the screen is smaller than X. — Shilly, Jan 18 '19 at 12:17

score 7 · Accepted Answer · answered Jan 18 '19 at 12:18

7

In your css file

// Desktop
.article {
    width: 100px;
}


// Mobile
@media only screen and (max-width: 768px) {
    .article {
        width: 50px;
    }
}

This are Media Queries.

In the first lines, we don't have any limitation, but then you override the current value ONLY when the width of the screen is lower than 768px

answered Jan 18 '19 at 12:18

Eugenio Valeiras

900
1
8
27

3

At a high level I think this is a good answer, so +1 -- but I would suggest starting with the mobile (small screen) styles as the default and then using the media query (min-width:769px) to change styles on larger screens. The current example means that the smaller device is required to parse all the styles, while the larger device isn't working as hard. Admittedly with one small media query you would never see a performance hit, but starting mobile-first is MUCH easier than refactoring to mobile first if your stylesheet is much larger someday. – ryantdecker Jan 18 '19 at 12:51

score 0 · Answer 2 · answered Jan 18 '19 at 12:35

0

Just use media Queries which is the best option to make the things responsive . Otherwise you can have a look at flexbox which is awesome flexbox

answered Jan 18 '19 at 12:35

Arjun Singh

1
2

score 0 · Answer 3 · answered Jan 18 '19 at 13:50

Use Media Queries

Using a breakpoint of 576px targets all kinds of mobile devices.

// This is the default size
.article {
   width: 100px;
}


// Small devices (landscape phones, 576px and up)
@media (min-width: 576px) { 
  width: 200px;
}

The other answer targets tablets too. But if you want to target mobile only, use my solution.

how to assign a css value for mobile and desktop in one line

3 Answers3

Use Media Queries