Bootstrap header will not change the image size - css

Question

I'm desperate trying to make this work, but I'm not sure what I'm doing anymore. For some reason the images in the small viewports are smaller than their appearance in large viewports, so I am stumped.
<div class="container-fluid p-2">
<div class="flex-row">
<div class="d-flex justify-content-center justify-content-xl-between align-items-center flex-wrap">
<div class="d-flex p-2">
<img id="logo" class="img-fluid" src="img/croppedlogo.svg" style="min-width: 300px; max-width: 100%;">
</div>
<div class="w-100 d-none d-sm-flex d-xl-none"></div>
<div class="d-none d-sm-flex p-2">
<div>
<a class="headerLink" href="index.aspx">Home</a>
<a class="headerLink" href="index.aspx">Products</a>
<a class="headerLink" href="index.aspx">About</a>
<a class="headerLink" href="index.aspx">Blog</a>
<a class="headerLink" href="index.aspx">Contact</a>
</div>
</div>
<div class="d-flex d-sm-none p-2">
<img src="img/menu.png">
</div>
<div class="w-100 d-xl-none"></div>
<div class="p-2">
<a href="index.aspx">
<img src="img/btnLogin.png" />
</a>
<a href="index.aspx">
<img src="img/btnRequestDemo.png" />
</a>
<a href="index.aspx">
<img src="img/btnResources.png" />
</a>
</div>
</div>
</div>
</div>
Here's the small amount of extra CSS I have:
body {
margin: 0px;
font-family: Arial;
font-size: 1em;
background-color: #FBFBFD;
}
.headerLink + .headerLink {
margin-left: 10px;
}
a.headerLink {
color: black;
text-decoration: none;
font-weight: bold;
padding: 0px;
}
a.headerLink:hover {
text-decoration: underline;
}
button png images are between 100px x 50px to 200px x 50px
Header for logo is as follows:
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="logo" x="0px" y="0px" viewBox="49.199989318847656 82.18773651123047 697.5000610351562 155.11227416992188" style="enable-background:new 0 0 792 330;" xml:space="preserve">
viewBox="0 0 792 330" style="enable-background:new 0 0 792 330;" xml:space="preserve">>
I am trying to get it so that the images span across the width of the screen in smaller viewports, but as it stands, the layout is even smaller in a phone than it is on the full desktop setting.
Any help would be greatly appreciated

Answer 1

From the way you wrote your code I understand that your problem is in smaller screens, so based on what you have I wrote the code below:
body {
margin: 0px;
font-family: Arial;
font-size: 1em;
background-color: #fbfbfd;
}
.headerLink+.headerLink {
margin-left: 10px;
}
a.headerLink {
color: black;
text-decoration: none;
font-weight: bold;
padding: 0px;
}
a.headerLink:hover {
text-decoration: underline;
}
#media all and (max-width: 768px) {
figure img {
width: 150px;
height: 50px;
object-fit: cover;
}
}
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap#4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
<div class="container-fluid p-2">
<div class="flex-row">
<div class="d-flex justify-content-center justify-content-xl-between align-items-center flex-wrap">
<div class="d-flex p-2">
<img id="logo" class="img-fluid" src="img/croppedlogo.svg" style="min-width: 300px; max-width: 100%;">
</div>
<div class="w-100 d-none d-sm-flex d-xl-none">
<div class="d-none d-sm-flex p-2">
<div>
<a class="headerLink" href="index.aspx">Home</a>
<a class="headerLink" href="index.aspx">Products</a>
<a class="headerLink" href="index.aspx">About</a>
<a class="headerLink" href="index.aspx">Blog</a>
<a class="headerLink" href="index.aspx">Contact</a>
</div>
</div>
</div>
<div class="d-flex d-sm-none p-2">
<img src="img/menu.png">
</div>
<div class="w-100 d-xl-none"></div>
<figure class="d-flex p-2">
<a href="index.aspx">
<img src="img/btnLogin.png" />
</a>
<a href="index.aspx">
<img src="img/btnRequestDemo.png" />
</a>
<a href="index.aspx">
<img src="img/btnResources.png" />
</a>
</figure>
</div>
</div>
</div>
Note that I renamed the div responsible for the images to figure just to make the CSS work easier, but you can call it whatever you want.
You want the images to take up the entire width of the screen in smaller viewports but you said the images are between 100px and 200px wide, so it's not clear if you want to resize them, but as an example I used 150px in CSS to be able to illustrate the example.
Notice that I used object-fit: cover for the image to maintain its proportions and fill the dimension provided. But here the image can be cropped to fit. But if you want to expand them at all costs you can use a width: 100vw; object-fit: fill;
On this specific image issue I recommend you check out this link from W3 Schools: CSS The object-fit Property.
As for the .svg you provided I wasn't able to insert it into your code as I don't know its exact location.
If you have any questions, just comment here that according to your needs I will update my answer.