After Header image causing huge user avatars on mobile devices

support
1

I just added a header image to my forum and thought all was good but not so…

Here’s what the site looks like without the image:

screenshot_no_header
screenshot_no_header.png720×1280 76.2 KB

Here’s what the site looks like with the image:

screenshot_with_header
screenshot_with_header.png720×1280 133 KB

As you can see, the avatars are huge. This is likely due to my undoubtedly crappy html. Here’s the code I used in the “After Header” section (desktop and mobile devices):

<style>
img {
width: 100%;
height: auto;
}
</style>
<img src="https://www.dropbox.com/s/wtwkcf2jidfd92r/single-track-bc-
header.jpg?raw=1" style=padding-bottom:18px; alt="Single Track BC header 
image">

I have put a band-aid on it for now by hiding the users

(.topic-list .posters {display: none;}

but for some reason it only works with the Desktop css, not the Mobile css.

Any pointers as to where I went wrong?

2

The style img {width: 100%;} is being applied to images that you don’t want it applied to. Give the header image a class and then just apply the width 100% to that.

<style>
.stbc-header-image {
width: 100%;
height: auto;
}
</style>
<img class="stbc-header-image" src="https://www.dropbox.com/s/wtwkcf2jidfd92r/single-track-bc-
header.jpg?raw=1" style=padding-bottom:18px; alt="Single Track BC header 
image">
4 Likes
3

You, sir, are a gentleman and a scholar. I thank you very much.