Currently facing two issues: creating a responsive container for images where they stay side by side when the resolution changes. However, on testing with a phone, the images stack vertically instead of horizontally, and one image's width appears distorted.
This is what I have attempted:
HTML
<div class="container-fluid">
<div class="row">
<div class="col-sm">
<img src="brands/Adidas-Logo.png" alt="" id="brand_img_adidas">
</div>
<div class="col-sm">
<img src="brands/Nike_logo.png" alt="" id="brand_img_nike">
</div>
<div class="col-sm">
<img src="brands/the-north-face-logo-png-8.png" alt="" id="brand_img_north">
</div>
<div class="col-sm">
<img src="brands/tommy-hilfiger-logo-png-transparent.png" alt="" id="brand_img_tommy">
</div>
<div class="col-sm">
<img src="brands/zara-logo-0.png" alt="" id="brand_img_zara">
</div>
</div>
</div>
CSS
#brand_img_adidas
{
width: 150px;
height: 100px;
max-width: 100%;
margin-left: 10px;
}
#brand_img_nike
{
width: 200px;
height: 100px;
margin-left: 20px;
max-width: 100%;
}
#brand_img_north
{
width: 150px;
height: 150px;
margin-left: 20px;
max-width: 100%;
}
#brand_img_tommy
{
width: 150px;
height: 120px;
margin-left: 20px;
max-width: 100%;
margin-right: 0;
}
#brand_img_zara
{
width: 150px;
height: 150px;
margin-left: 10px;
margin-right: 0;
max-width: 100%;
}