Change CSS only for mobile devices? [duplicate]

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?

Answer 1

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.

Answer 2

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

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