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'/>
display : flex;
margin-top : 30px;
padding-right : 50px
aaannd they looks like this :
see how the image is cropped and not resizing properly...