CODEWITHSUNDEEP
htmlcssmobile
Citra45Abadi
Citra45Abadi

Reputation: 207

how to arrange 2 images side by side in mobile view?

the images are already responsive using max-width and max-height and also has float : left.

using display : inline-block does not arrange them side by side but top and bottom but the image becomes smaller as I decrease the window size.

using display : flex however, arranges them side by side... but the problem is the image does not become smaller and overflowed when I decrease the window size.

what is the proper way to do this? I want the images to have relative width and height, arranged side by side (only 2 images) so they will become smaller or bigger depending on the window/viewport size.

here is my attempt so far :

HMTL

<div class='w3-container inline' style='position : relative; right : 10px;' >
 <img class='w3-round' style=' float : left; 
 position : relative; right : 50px; 
 max-width : 200px; max-height : 200px;' src='promo/PROMO PKET.png'/>
 </div>

CSS

.inline {
display : flex;
margin-top : 30px;
padding-right : 50px
}

aaannd they looks like this : enter image description here

see how the image is cropped and not resizing properly...

Upvotes: 0

Views: 3215

Answers (2)

Stix
Stix

Reputation: 11

You can make use of percentages to keep them responsive. I don't really recommend all the float stuff, go with display: inline-block; instead.

.container{text-align:center;}
.container img{display:inline-block;width:50%;}

Working example here: https://jsfiddle.net/gx6toshr/4/

Upvotes: 0

Sergio Rivas
Sergio Rivas

Reputation: 563

Use percentages for your sizes, Example width: 50%; max-width: 50% instead of pixeles

Upvotes: 1

Related Questions