Increase avatar size on desktop but not mobile?

[AndreasW]

Hello,

forum: http://www.jwfan.com/forums

On IPBoard 4.4, we had this in our custom.css that made avatars display bigger in desktop, and this didn't affect mobile

    .ipsUserPhoto_large img, img.ipsUserPhoto_large, .ipsUserPhoto_large:after {
        width: 120px;
        height: 120px;
        {{if theme.rounded_photos}}
            border-radius: 45px;
        {{endif}}
    }

 

If I put this same code into the custom.css of our (default) theme now that we're on IPBoard 4.5., the avatars look fine on desktop (well, almost fine, the badges for admins are off-center) but it completely breaks the mobile view

 

Does anybody know what CSS I can use to affect desktop avatar size only but leave mobile CSS alone?

 

Maybe some kind of if statement that determines if the parent is "cAuthorPane_info" vs "cAuthorPane_mobile" ?

[AndreasW]

WOOP nevermind, I just figured it out

If anyone else wants to do the same,

 

In Forums/Topics/postContainer, change this:

 

			<li data-role='photo' class='cAuthorPane_photo'>
				{template="userPhoto" app="core" group="global" params="$comment->author(), 'large', $comment->warningRef()"}
				{{if $comment->author()->modShowBadge()}}
				<span class="cAuthorPane_badge cAuthorPane_badge--moderator" data-ipsTooltip title="{lang="member_is_moderator" sprintf="$comment->author()->name"}"></span>
				{{elseif $comment->author()->joinedRecently()}}
				<span class="cAuthorPane_badge cAuthorPane_badge--new" data-ipsTooltip title="{lang="member_is_new_badge" sprintf="$comment->author()->name"}"></span>
				{{endif}}
			</li>

to this:

			<li data-role='photo' class='cAuthorPane_photo'>
				{{if $comment->author()->pp_main_photo AND $comment->author()->pp_thumb_photo}}
              <img src="{url="" base=""}/uploads/{$comment->author()->pp_main_photo}">
              {{else}}
              <img src="{$comment->author()->photo}">
              {{endif}}
				{{if $comment->author()->modShowBadge()}}
				<span class="cAuthorPane_badge cAuthorPane_badge--moderator" data-ipsTooltip title="{lang="member_is_moderator" sprintf="$comment->author()->name"}"></span>
				{{elseif $comment->author()->joinedRecently()}}
				<span class="cAuthorPane_badge cAuthorPane_badge--new" data-ipsTooltip title="{lang="member_is_new_badge" sprintf="$comment->author()->name"}"></span>
				{{endif}}
			</li>

And in custom.css add this:

.cAuthorPane_photo img {
    max-width: 170px;
    width: auto;
}

 

Edited November 4, 2020 by AndreasW

[Meddysong]

Your way's not necessarily wrong if it works for you but it seems a lot more complex than it needs to be, and amending the templates themselves is usually a last-ditch solution.

It seems to me that you can solve the problem easily with one entry in custom.css:

@media (min-width:992px){
  .ipsUserPhoto_large {
  	height: yourheight;
  	width: yourwidth;
	}
}

This will apply throughout the suite so if it's important to hit only Forums but leave other instances of the large photo unchanged, you could try a more specific way of targeting, such as:

body[data-pageapp="forums"] @media (min-width:992px){
	.ipsUserPhoto_large {
  		height: yourheight;
  		width: yourwidth;
	}
}

[AndreasW]

Thanks, I'll try that in a sandbox theme

[AndreasW]

I made a new default theme, titled it Sandbox, and put your code in its custom.css and it didn't change anything >shrug<

https://www.jwfan.com/forums

Edited October 29, 2020 by AndreasW

[Morrigan]

Its because you're targeting it incorrectly. It needs to be:
 

@media (min-width:992px){
.ipsUserPhoto_large img, img.ipsUserPhoto_large, .ipsUserPhoto_large::after {
    width: 120px;
    height: 120px !important;
  }
}

 

Edited October 29, 2020 by Morrigan

[AndreasW]

Updated the sandbox.

 

That made everything off center including the badges

 

So far the other method is winning still