XF 1.2 Hide Avatars in responsive mode

[RoyalRumble]

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

 

[Paul B]

You can achieve that in several ways.

You could edit the templates and add the hiddenResponsiveNarrow class to the relevant elements.

Or you could use media queries in EXTRA.css to hide the elements, e.g.

<xen:if is="@enableResponsive">
    @media (max-width:@maxResponsiveNarrowWidth) {
        .class {
        display: none;
        }
    }
</xen:if>

http://xenforo.com/community/resources/responsive-design.2193/

 

[RoyalRumble]

Thanks again Brogan - super speedy helpful support as ever.

So this is the code in EXTRA.css



But avatars to the left of threads in mobile remain.



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

 

[Paul B]

That was an example.

You will need to replace "class" with the actual class names you want to hide.

 

[Sheldon]

.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.

 

[xf_phantom]

try

xen:if is="@enableResponsive">
@media (max-width:@maxResponsiveNarrowWidth) {
.avatar {
display: none;
}
}
</xen:if>

 

[RoyalRumble]

Ah thanks guys - I tried avatar as @xf_phantom suggested but no joy. Any ideas how I find the class for avatars?

 

[Paul B]

Right click and open the browser inspection tool.



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.

 

[RoyalRumble]

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)

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

And

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

 

[arms]

I used this:

@media (max-width: 600px) {
  .discussionList .listBlock.posterAvatar
                {
                     display: none
                }

 

[RoyalRumble]

I used this:

@media (max-width: 600px) {
  .discussionList .listBlock.posterAvatar
                {
                     display: none
                }

Awesome, thanks a lot

 

[arms]

Awesome, thanks a lot

Np, nice forum. Wish RAWK would move to Xenforo.

 

[RoyalRumble]

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;





But 600 plus, they disappear.



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

[EDIT]

A tweak to this seems to have resolved;

@media (max-width:@maxResponsiveWideWidth)
{
    .discussionList .listBlock.posterAvatar {display:none;}
}

 

[LurkerLou]

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.

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

That just removes everything.

 

[Paul B]

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.

 

[LurkerLou]

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.

 

[Paul B]

The above code only removes the H3 user text.

Use a browser inspection tool to see what other classes need modifying.

 

[LurkerLou]

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.

 

[Paul B]

That's .message .messageInfo margin-left.

 

[LurkerLou]

That's .message .messageInfo margin-left.

Tried the below code in Extra.css to no avail.

<xen:if is="@enableResponsive">
    @property (max-width:@maxResponsiveWideWidth)
{
    .message .messageInfo {margin-left: 10px;}
}
</xen:if>