CODEWITHSUNDEEP
htmlcssresponsive-designmedia-queries
user6918687
user6918687

Reputation: 11

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!

Upvotes: 1

Views: 11517

Answers (2)

Prathap
Prathap

Reputation: 1

Yeah Using media queries is simple one for example :

@media (min-width:100px) and (max-width: 1024px)

by using in this way change your class or id which is exactly suiting to this mobile view

Second thing is dont use height and width in px rather than use in % then the image also gets shrink based on thw viewport

try it and revert

Upvotes: 0

Kiran Dash
Kiran Dash

Reputation: 4956

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
}

Upvotes: 1

Related Questions