• This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn more.

XF 1.2 Hide Avatars in responsive mode

#1
Hi everyone,

I don't suppose the entitled is possible? And if so, could someone kindly place some code to stick in extra.css that achieves this?

Preferably, if less than X width, avatars removed.

Thanks
 
#3
Thanks again Brogan - super speedy helpful support as ever.

So this is the code in EXTRA.css

Screen Shot 2014-02-16 at 13.26.50.png

But avatars to the left of threads in mobile remain.

IMG_2927.PNG

Are you able to advise what I'm doing wrong?
 

Sheldon

Well-known member
#5
.class is the CLASS for the avatar. You have to find which class is for the avatar and replace (.class)

*As the robot above said.
 

Brogan

XenForo moderator
Staff member
#8
Right click and open the browser inspection tool.

upload_2014-2-16_14-10-31.png

Try using .avatarHolder.

Actually though, I would probably use: .Responsive .messageUserBlock div.avatarHolder.

When you do that though, you will also need to remove the left margin from this: .Responsive .messageUserBlock h3.userText.
 
#9
Thanks again Brogan.

Sorry to keep asking, could you kindly have a glance over the below an confirm if I'm doing this right? (I tried both, both never had an impact)

Code:
<xen:if is="@enableResponsive">
    @media (max-width:mad:maxResponsiveNarrowWidth) {
        .Responsive .messageUserBlock div.avatarHolder {
        display: none;
        }
    }
</xen:if>
And

Code:
<xen:if is="@enableResponsive">
    @media (max-width:mad:maxResponsiveNarrowWidth) {
        .avatarHolder{
        display: none;
        }
    }
</xen:if>
 
Last edited:
#13
Np, nice forum. Wish RAWK would move to Xenforo.
Cheers @arms ,

On this, I've noticed a bit of an odd issue. It prevents Node Icons being displayed on any width over 600.

So 600 width and below, node icons show;



Screen Shot 2014-02-17 at 17.21.34.png

But 600 plus, they disappear.

Screen Shot 2014-02-17 at 17.21.43.png

Definitely isolated to this code. Does this happen to you?

[EDIT]

A tweak to this seems to have resolved;

Code:
@media (max-width:@maxResponsiveWideWidth)
{
    .discussionList .listBlock.posterAvatar {display:none;}
}
 
#14
Right click and open the browser inspection tool.

View attachment 67384

Try using .avatarHolder.

Actually though, I would probably use: .Responsive .messageUserBlock div.avatarHolder.

When you do that though, you will also need to remove the left margin from this: .Responsive .messageUserBlock h3.userText.
Brogan, I've been able to remove the avatars on responsive but I can't seem to remove the reserved avatar space on responsive. This is the code I used but it's obviously incorrect.

Code:
<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveWideWidth)
{
    .Responsive .messageUserBlock h3.userText {display:none;}
}
</xen:if>
That just removes everything.
 

Brogan

XenForo moderator
Staff member
#15
You will also need to add CSS for the other template classes as required.

As I stated above: When you do that though, you will also need to remove the left margin from this: .Responsive .messageUserBlock h3.userText.

Further changes may be required.
 
#16
You will also need to add CSS for the other template classes as required.

As I stated above: When you do that though, you will also need to remove the left margin from this: .Responsive .messageUserBlock h3.userText.

Further changes may be required.
From the discussion list and thread list is all I really want to hide. That makes it a very sleek mobile edit. The issue I'm having is I don't know where to remove the left margin. I put it in extra.css with the above code but that didn't work.
 

Brogan

XenForo moderator
Staff member
#17
The above code only removes the H3 user text.

Use a browser inspection tool to see what other classes need modifying.
 
#18
The above code only removes the H3 user text.

Use a browser inspection tool to see what other classes need modifying.
The class is .messageUserBlock h3.userText on a desktop. I can't inspect elements on a mobile device so I can't see what the padding is on mobile.

The attached pic shows the part that I want to remove, the circle part. I tried the above code which removed the H3 text completely so I know I'm on the right track but I can't figure it out.