After Header image causing huge user avatars on mobile devices

Product Support

AI-generated summary

A user, ron_jeremy, added a header image to their forum, which caused huge user avatars on mobile devices. They provided screenshots and shared the code used in the “After Header” section. simon suggested that the issue is due to the img style being applied to all images, and recommended giving the header image a class and applying the style only to that class. ron_jeremy implemented the solution and thanked simon for the help.

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_header720×1280 76.2 KB

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

screenshot_with_header
screenshot_with_header720×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">
3

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