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?

Solution 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.

Solution 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;}
}

Solution 3

Read and understand about Media Queries

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

Comments

[ashleedawg]

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! (How to Answer)

[ashleedawg]

Perhaps 1000px would be a better width than 600 to differentiate between mobile and desktop devices.