Bootstrap header will not change the image size

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.

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:

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

user_7753089 · Answer

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;
  }
}

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.

Bootstrap header will not change the image size

1 Answers