Citra45Abadi Citra45Abadi - 1 year ago 81
CSS Question

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

the images are already responsive using

and also has
float : left

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.

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 :


<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'/>


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

Answer Source

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

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download