Change CSS only for mobile devices?

Question

I just finished creating my website but now I have found a failure. My problem is that my website looks totally nice on the PC. But if I go and look at it from my mobile phone, the spaces between certain images etc. are a great deal too much...

So my question is, how can I create some CSS codes who are only affecting the mobile devices and maybe tablets?

Is there a way?

you can use `@media` to write css to apply only on some screen resolutions — Masoud, Mar 03 '17 at 18:30
Yes. You are looking for [Media Queries](https://www.w3schools.com/css/css_rwd_mediaqueries.asp) — Leon Freire, Mar 03 '17 at 18:30

score 15 · Answer 1 · edited Dec 28 '22 at 00:32

15

CSS has feature called media queries. From the MDN link:

Media queries, added in CSS3, let the presentation of content be tailored to a specific range of output devices without having to change the content itself

For example:

div {
    background: black;
}

@media (max-width: 1000px) {
    div {
        background: yellow;
    }
}

The background color of this div will be yellow on screen under 1000px width like in the example provided.

edited Dec 28 '22 at 00:32

Michael M.

10,486
9
18
34

answered Mar 03 '17 at 18:33

Eyal Cohen

1,188
2
15
27

1

Perhaps `1000`px would be a better width than 600 to differentiate between mobile and desktop devices. – ashleedawg Jan 06 '19 at 09:29

score 4 · Answer 2 · edited Dec 27 '22 at 16:58

4

You can use media-queries for different screen resolutions. Example:

#image img {
    width:375px;
}

@media screen and (min-width: 1366px) {
    #image img {width:375px;}
}

edited Dec 27 '22 at 16:58

Aiq0

306
1
11

answered Mar 03 '17 at 18:31

Purvil Bambharolia

653
4
14

1

This answer would be more helpful (and would score higher) with a little more information. Could you explain a little further? Which is which? Any related links? thanks! ([answer]) – ashleedawg Jan 06 '19 at 09:19

score 2 · Answer 3 · answered Mar 03 '17 at 18:31

2

Read and understand about Media Queries

You will be able to adjust the css of certain media sizes of your website.

answered Mar 03 '17 at 18:31

Joseph Vu

56
4

Change CSS only for mobile devices?

3 Answers3