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

For support and discussion related to templates and themes in phpBB 3.3.
Post Reply
SQLnovice
Registered User
Posts: 118
Joined: Thu Oct 10, 2019 5:03 am

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

Post by 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. :D 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.
Last edited by Mick on Mon Feb 06, 2023 12:03 pm, edited 1 time in total.
Reason: Solved.
User avatar
danieltj
Registered User
Posts: 208
Joined: Thu May 03, 2018 9:32 pm
Name: Daniel James
Contact:

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

Post by 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
Registered User
Posts: 118
Joined: Thu Oct 10, 2019 5:03 am

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

Post by 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.
User avatar
cabot
Registered User
Posts: 689
Joined: Sat Jan 07, 2012 4:16 pm
Contact:

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

Post by 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
Registered User
Posts: 118
Joined: Thu Oct 10, 2019 5:03 am

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

Post by SQLnovice »

:ugeek:

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. 8-) 8-) 8-) 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).
;)
Post Reply

Return to “[3.3.x] Styles Support & Discussion”