XF 1.4 center username/title

Jordyn

Well-known member
hi,

i have centered username and title, though when using iphone, the username/title is centered to which i guess is normal.
i used this idea:
https://xenforo.com/community/threads/how-do-i-center-the-username-custom-title.75233/
and tried:
Code:
.messageUserBlock em.username {
text-align:center;
}

.messageUserBlock em.userTitle {
text-align:center;
}

both do the same thing. but...

im wondering if there is a way around this please. where mobile shows username/title normal (to the left). or mobile view not effected at all. and only show centered on desktop view.
is this possible?
thanks.
 
You can use media queries to alter CSS based on the viewport (browser) width.

So at the narrow width you can remove the centering.

There's a link in my signature which has a guide for responsive design.
 
thanks man.

so just as a guess, would i add to CSS something like this please.

Code:
<xen:if is="@enableResponsive">
    .messageUserBlock em.userTitle {
    float: none;
    }
</xen:if>

and same for
em.username?

thanks.

edit nope that dont work. better read more
 
yes, still trying mate thanks.

edit:

this seems to work, look ok?
but the username and title are inline with each other.

example:

EvilSSAdmin
im hoping for:
EvilSS
Admin

Code:
.messageUserBlock a.username {
text-align:center;
}

.messageUserBlock em.userTitle {
text-align:center;
}


<xen:if is="@enableResponsive">
  @media (max-width:800px) {
  .messageUserBlock em.userTitle {
  float: left !important;
  }
  }

  @media (max-width:610px) {
  .messageUserBlock em.userTitle {
  float: left !important;
  }
  }

  @media (max-width:480px) {
  .messageUserBlock em.userTitle {
  float: left !important;
  }
  }
</xen:if>

<xen:if is="@enableResponsive">
  @media (max-width:800px) {
  .messageUserBlock a.username {
  float: left !important;
  }
  }

  @media (max-width:610px) {
  .messageUserBlock a.username {
  float: left !important;
  }
  }

  @media (max-width:480px) {
  .messageUserBlock a.username {
  float: left !important;
  }
  }
</xen:if>




EDIT:

ok i see where i went wrong. Its meant to be text-align:
Code:
<xen:if is="@enableResponsive">
  @media (max-width:800px) {
  .messageUserBlock a.username {
  text-align: left;
  }
  }

  @media (max-width:610px) {
  .messageUserBlock a.username {
  text-align: left;
  }
  }

  @media (max-width:480px) {
  .messageUserBlock a.username {
  text-align: left;
  }
  }

  @media (max-width:800px) {
  .messageUserBlock em.userTitle {
  text-align: left;
  }
  }

  @media (max-width:610px) {
  .messageUserBlock em.userTitle {
  text-align: left;
  }
  }

  @media (max-width:480px) {
  .messageUserBlock em.userTitle {
  text-align: left;
  }
  }
</xen:if>

this works, its ok to use, like not messy?
thank you @Brogan
 
Last edited:
No reason to use float when text-align: left should do it.

Also you can combine CSS

Code:
<xen:if is="@enableResponsive">
@media (max-width: @maxResponsiveNarrowWidth)
{
.messageUserBlock em.userTitle,
.messageUserBlock a.username
{
        text-align: left;
}
}
</xen:if>

The narrow width should be enough (unless there is something specific to your style) to do what you want as the other widths should still use the default look in the messageUserBlock.
 
Last edited:
Top Bottom