Issues with adjusting centered profile fields

Good evening,

I loved the option about making the profile centered, it gives a new look to the board, but I'm having issues with the fields.

If I leave them as they came when I did a fresh install of FAE, the fields will look ugly, because they don't align side by side, but follow the default vertical positioning.

I did some adjustments on my CSS so I could have these profile fields displayed as I wanted, though they don't work well for mobile, and my main reason for getting FAE was about being mobile friendly.

I wanted a way to scroll horizontally the profile fields when on mobile or something along this line to make it work better on smaller screens.

It's easy to see my issue just by visiting here: http://novabrasilis.forumeiros.com/t1-seu-primeiro-topico

Resizing the window gives the same effect I have when accessing the board on my phone.

Hi @dannig,

Add the following CSS rule to your stylesheet to see if it helps.
Admin Panel > Display > Colors

Code:

@media (max-width: 768px) and (min-width: 0px) {
  .field-info, .postprofile dt {
    max-height:150px;
    overflow-y:auto;
    width:50% !important;
  }

  .field-info { text-align:center; }
}

It should evenly distribute the width between the avatar and profile fields while also restricting the height to 150 pixels. If anything exceeds 150 pixels in height, a scroll bar will appear.

The code almost solves my issue, but I rather have the whole profile with an horizontal scrollbar bellow it (including the avatar).

It looks like this now:



I DO want it to have a scrollbar, but at the bottom and maybe not putting bars on the avatar because I set up an overlay (a div with an image to give the avatar the dirty effect) and when the avatar changes it's width or height in any way it breaks the overlay.

Something like this perhaps ?

Code:

@media (max-width: 768px) and (min-width: 0px) {
  .postprofile {
    min-height:260px;
    overflow-x:auto;
  }

  .postprofile dl { width:150%; }
  .field-info, .postprofile dt { width:50% !important; }
}

( replace the other CSS with the CSS above )

Aaaaaalmost there, like, really almost. How can I fix the "inline-block" boxes and prevent them from going below each other like this? Also preventing the fields from overlapping the avatar.

The best solution I can think of would be to increase the width of the parent container, so that there's more room for the content. Increasing the width of

Code: .postprofile dl

to 200%, for example. Currently the width is distributed evenly between the avatar and profile fields ; 50% each to be precise.

You could 1. increase the width of the parent ( which would cause you to scroll horizontally to see more.. 200% + 50% = 100% width each, so WIDTH / 2 )

Code:

.postprofile dl { width:200%; }

or 2. you can try distributing the width differently, like 40% to the avatar and 60% to the fields, for example.

Code:

.postprofile dt { width:40% !important; }
.postprofile dd { width:60% !important; }

The main issue is that the contents of dt and dd are using absolute lengths, such as px, which can be problematic when designing responsive themes as these lengths don't resize based on the screen or parent container leading to the contents overflowing their parents and overlapping other containers. I think solution 2 wouldn't be the best choice because of that. If you can, I highly recommend designing using relative lengths, such as percent or em, because they resize based on the screen and parent container. Check this page out to learn about the different measurements in CSS.

In regards to the avatar, defining max-width:100%; usually keeps it from overflowing the parent, because 100% = 100% of the parent's width. You can also use this method for any other elements that you want to keep from overflowing. Sizing down the avatar for mobile is also another solution, if you saw in the default mobile CSS for FAE the avatar was reduced to 50px which is a fairly decent size if you want to keep things roomy, of course 100px could be good too.

Thanks for the advising! I was able to get the effect I wanted by using this:

Code:

span.value {
    display: block !important;
    min-width: 250px !important;
    min-height: 130px;
}
.postprofile {
    width: 100%;
    margin: -10px 0 10px!important;
    float: none!important;
    height: 270px;
    overflow: auto;
    white-space: nowrap;
}
.postprofile dl {
    background: #63543d;
    min-width: 1100px;
}
.field-info {
    display: inline-block;
    max-height: 150px;
}
.postprofile dt, .user-avatar {
    float: left;
    white-space: nowrap;
    width: 325px !important;
}
span.profile-field.field_personagem {
    display: inline-block;
}
span.profile-field.field_capacidades {
    display: inline-block;
}
span.profile-field.field_itens {
    display: inline-block;
}

Your directions helped a lot! Thanks!

You're welcome.