Custom User Bar Mobile Alignment

[JustBrowsing90]

Forgive my ignorance as I'm still new to XenForo & this site so hopefully this is the right section.

I'm on v2.2.15 & would like to use custom images for the user bars. I've gotten them to align on profiles & the postbit but on mobile they're off to the side instead of being underneath like the one's were temporarily using via the [XTR] Unlimited User Group Banners 1.0.4 add-on.

So I'm wondering if there's a way to have them so they're aligned properly on mobile too & if it's one code for all user bars or if I'll need separate codes for every user bar based on the user bars size.

Also I don't own a mobile device so I'm simulating it via Chrome if that matters.

Here's a few screenshots of what I'm talking about along with the code I'm using in the extra.less template:

Profiles:

Postbit:

Custom user bars Mobile:


How I want them to be:

extra.less:

.userBanner-JIMZOF {
background: url("https://i.ibb.co/bBc5X7X/JIMZO-F-RANK.png") no-repeat;
height: 46px;
width: 106px;     
text-indent: -999999px;
margin: 0 auto;
}

Many thanks in advance ​

 

[FateKid]

Forgive my ignorance as I'm still new to XenForo & this site so hopefully this is the right section.

I'm on v2.2.15 & would like to use custom images for the user bars. I've gotten them to align on profiles & the postbit but on mobile they're off to the side instead of being underneath like the one's were temporarily using via the [XTR] Unlimited User Group Banners 1.0.4 add-on.

So I'm wondering if there's a way to have them so they're aligned properly on mobile too & if it's one code for all user bars or if I'll need separate codes for every user bar based on the user bars size.

Also I don't own a mobile device so I'm simulating it via Chrome if that matters.

Here's a few screenshots of what I'm talking about along with the code I'm using in the extra.less template:

Profiles:

Postbit:

Custom user bars Mobile:


How I want them to be:

extra.less:

.userBanner-JIMZOF {
background: url("https://i.ibb.co/bBc5X7X/JIMZO-F-RANK.png") no-repeat;
height: 46px;
width: 106px;  
text-indent: -999999px;
margin: 0 auto;
}

Many thanks in advance ​

Depending on your current element structure, you could display the elements within a flex container, using flex-direction and media queries to display it differently.
Drop your website link and I'll be able to send more customized CSS for you to use.

For example, a possible solution would be:

/* ################### ORIGINAL CODE (Compressed) ################### */
.userBanner-JIMZOF { background: url("https://i.ibb.co/bBc5X7X/JIMZO-F-RANK.png") no-repeat; height: 46px; width: 106px; text-indent: -999999px; margin: 0 auto; }
/* ####################################################################### */

/* HTML Syntax - Mobile Queries */
@media only screen and (max-width: 600px)
{
    .userBanner-JIMZOF
    {
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
    }
}
/* XenForo Template Syntax - Mobile Queries */
@media (max-width: @xf-responsiveNarrow)
{
    .userBanner-JIMZOF
    {
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
    }
}

Again, this would work if you've contained both/all elements within a container, each element group being part of their own div.

 

[JustBrowsing90]

Depending on your current element structure, you could display the elements within a flex container, using flex-direction and media queries to display it differently.
Drop your website link and I'll be able to send more customized CSS for you to use.

For example, a possible solution would be:

/* ################### ORIGINAL CODE (Compressed) ################### */
.userBanner-JIMZOF { background: url("https://i.ibb.co/bBc5X7X/JIMZO-F-RANK.png") no-repeat; height: 46px; width: 106px; text-indent: -999999px; margin: 0 auto; }
/* ####################################################################### */

/* HTML Syntax - Mobile Queries */
@media only screen and (max-width: 600px)
{
    .userBanner-JIMZOF
    {
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
    }
}
/* XenForo Template Syntax - Mobile Queries */
@media (max-width: @xf-responsiveNarrow)
{
    .userBanner-JIMZOF
    {
        display: flex !important;
        align-items: center !important;
        flex-direction: column !important;
    }
}

Again, this would work if you've contained both/all elements within a container, each element group being part of their own div.

Worked perfectly. Many thanks

 

[FateKid]

Worked perfectly. Many thanks

Glad to hear it worked out for you! Reach out if you need anything else.