XF 1.4 center username/title

[Jordyn]

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:

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

 

[Paul B]

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.

 

[Jordyn]

thanks man.

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

<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

 

[Paul B]

You need to include the media query element related to the width.

 

[Jordyn]

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

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

<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

 

[Steve F]

No reason to use float when text-align: left should do it.

Also you can combine CSS

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

 

[Jordyn]

thank you @Steve F
ive been going at this for awhile now. and bang, your code works perfect. the last :if> tag sorta caught me but, all good.
cheers for that code mate.

 

[Steve F]

Oops, lol typed that on mobile.

Will edit it

 

[Jordyn]

awesome job on the mobile thats for-sure
again thank you.