user6918687 user6918687 - 2 months ago 10
CSS Question

Media Queries - Make images responsive

I have a lot of images on my page and are all connected with lines, something like this:

$ $
\ /
$ ( Assuming $ is an image )
/ \
$ $


When I view this page on my phone, the images and the lines are all scattered.Now using media queries, how can I make the images smaller to fit my phone's screen and WITHOUT the images changing their position. I only want to change their size.

Thanks!

Answer

Using media query is really simple just use @media and the device range you want. And then inside of it write down the css that you want to apply for that range.

img {
   width: 500px; // current width
   height: 500px; // current height
}

@media (max-width:767px){
 img {
   width: 200px; // new width for screen <768px
   height: 200px; // new height for screen <768px
 }
}

Also make sure that you add the following code to the head of your html markup.

<meta name="viewport" content="width=device-width, initial-scale=1">

This single line will make sure that your webpage takes full width of device width and resets any device zooming to 1. And thus will help you set a proper view for your mobile visitors.

Other media query rules:

@media (min-width:768px and max-width:1199px){
   // code for device screen between 768 and 1200px
}

@media (min-width:1199px){
   // code for device screen larger than 1199px
}
Comments