Citra45Abadi Citra45Abadi - 2 months ago 12
CSS Question

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

Answer

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