Member RANKS images don't shrink in mobile phone portrait mode

[SQLnovice]

Version 3.3.8
PHP 8.0

Is there a code change to resize RANKS images so they shrink, like avatar images do when displaying the forum layout in portrait mode?

We keep our RANKS images to a maximum of 120 pixel wide x 95 pixels high, which is tiny compared to the 250 x 200 that avatars can be set to. It makes the RANKS images large enough to comprehend in normal forum landscape wide-screen layout. However, for smartphone users, which makes up 66% of our users now, when they view the forum in portrait mode, their avatar images shrink down proportionately, but the RANKS image doesn't, it remains full size, overpowering just about everything else on a tiny smartphone screen.

[danieltj]

Can you share a link to your forum so we can look at your board and give you the relevant CSS changes to make for your selected style?

[SQLnovice]

It's for Prosllver, the default.

I thought of just looking at some of the more common files that control settings to see if I could recognize one that had duel settings for the avatar based on some layout, since that one adjusts/shrinks. But since I know little about forum code, probably best just to ask what sequence of code might work to also adjust the Ranks image too.

[cabot]

Hello,

By default the max width "all screens" for ranks is 160px, you can define a lesser max width (eg. 80px) for small screens by adding this CSS rule :

Code: Select all

@media (max-width: 700px) {
	.profile-rank img {
		max-width: 80px;
	}
}

[SQLnovice]

That fixed it! Only 80px isn't enough, 40px is though! When the screen display width is reduced to portrait or thinner, so too does the rank image. The default CSS forgets about reducing the rank image, so only the avatar image shrinks. Portrait thread viewers, mobile phone layout, are blasted with enormous rank images that overpower everything else on their screens.

I'd suggest cabot's css modification to be the better option over the default!

Make a copy of your original files before making any modification to the working CSS file(s). Purge the cache (ACP) after saving your changes. And shift-refresh your forum thread page.
root/styles/%style%/theme/content.css approximately Line 700 in Prosilver, find this section

/* Poster profile block
----------------------------------------*/

You will find this below it ~line 737:

Code: Select all

.profile-rank img {
	max-width: 160px;
}

Replace with:

Code: Select all

@media (max-width: 700px) {
	.profile-rank img {
		max-width: 40px;
	}
}

In other styles, they may not contain the original Prosilver-like .profile-rank img code at all, in which case, you'll want to ADD this code

below:

Code: Select all

.postprofile dt.no-profile-rank, .postprofile dd.profile-rank, .postprofile .search-result-date {
	margin-bottom: 10px;
}

ADD the new .profile-rank img code below it to look like this:

Code: Select all

.postprofile dt.no-profile-rank, .postprofile dd.profile-rank, .postprofile .search-result-date {
	margin-bottom: 10px;
}
@media (max-width: 700px) {
	.profile-rank img {
		max-width: 40px;
	}
}

Don't forget to Purge the cache (ACP) after saving your changes. And shift-refresh your forum thread page, which for mobile browser users is accomplished by selecting the three-dot menu and holding down the refresh (clockwise-arrow).

[Thunder86]

I have to reopen this topic because I have an issue with the rank img.

The Code works in the topic view but in profile, memberlist and teamlist is the image size to big if I upload an rank image size bigger than 160x

How can I set the max width there to max 160px as well?

Screenshot 2024-07-08 at 10.15.18.png

Using version 3.3.12 with myInvision style