Latest topics
» Multi-step Login Form
by Ange Tuteur Today at 10:36

» Post Cards
by Ange Tuteur Today at 10:35

» Simple Theme Changer
by Ange Tuteur Today at 10:34

» Starred Forums
by Ange Tuteur Today at 10:31

» IconSkouliki
by skouliki Yesterday at 03:40

» help me about Latest topic
by Valoish Sat 27 May 2017, 14:53

» Display a preview of the user profile on hover
by Haytam Sat 27 May 2017, 12:39

» Chit Chat Thread
by Ange Tuteur Sat 27 May 2017, 12:11

» Colored Bar Navigation
by Valoish Fri 26 May 2017, 23:03

» FM Themes
by SLGray Thu 25 May 2017, 22:39

» User - Made Creations
by SLGray Thu 25 May 2017, 22:37

» Classified Ads
by SLGray Thu 25 May 2017, 19:23

» Categories as tabs on Edge!
by STBW Thu 25 May 2017, 04:11

» [GAME] What are you thinking right now?
by Ange Tuteur Wed 24 May 2017, 15:10

» [GAME] Countdown from 200,000
by Ange Tuteur Wed 24 May 2017, 15:09

Recent Tutorials
Who is online?
In total there are 7 users online :: 2 Registered, 0 Hidden and 5 Guests :: 2 Bots

Ch@lo Valdez, SarkZKalie

[ View the whole list ]


Most users ever online was 172 on Fri 19 Feb 2016, 05:17

Issues with adjusting centered profile fields

View previous topic View next topic Go down

avatar
dannig

Title :
I always create, I never keep.
Gender : Female
Age : 29
Posts : 36
Points : 124
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.novabrasilis.forumeiros.com https://www.facebook.com/https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig on Mon 17 Apr 2017, 16:56

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.


Last edited by dannig on Wed 19 Apr 2017, 14:00; edited 1 time in total
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4548
Points : 9376
Reputation : 2294
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 18 Apr 2017, 11:18

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.
avatar
dannig

Title :
I always create, I never keep.
Gender : Female
Age : 29
Posts : 36
Points : 124
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.novabrasilis.forumeiros.com https://www.facebook.com/https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig on Tue 18 Apr 2017, 11:36

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.
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4548
Points : 9376
Reputation : 2294
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Tue 18 Apr 2017, 12:22

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 )
avatar
dannig

Title :
I always create, I never keep.
Gender : Female
Age : 29
Posts : 36
Points : 124
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.novabrasilis.forumeiros.com https://www.facebook.com/https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig on Tue 18 Apr 2017, 13:16

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.

avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4548
Points : 9376
Reputation : 2294
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Wed 19 Apr 2017, 10:56

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.
avatar
dannig

Title :
I always create, I never keep.
Gender : Female
Age : 29
Posts : 36
Points : 124
Reputation : 11
Location : Brazil
Language : English, Brazilian-Portuguese
Browser : Browser : Google Chrome Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile http://www.novabrasilis.forumeiros.com https://www.facebook.com/https://www.facebook.com/dannielaaragao https://twitter.com/dannielagoes

Postdannig on Wed 19 Apr 2017, 13:58

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!
avatar
Ange Tuteur
Administrator
Title :
Coffee Addict
Gender : Male
Age : 21
Posts : 4548
Points : 9376
Reputation : 2294
Location : Macungie, PA
Language : EN10, FR5
Browser : Browser : Brave Forum Version : Forum Version : Forumactif Edge
Awards :
View all awards
View user profile https://github.com/SethClydesdale https://twitter.com/sethc1995

PostAnge Tuteur on Mon 24 Apr 2017, 11:54

You're welcome. Smile

View previous topic View next topic Back to top

Create an account or log in to leave a reply

You need to be a member in order to leave a reply.

Create an account

Join our community by creating a new account. It's easy!


Create a new account

Log in

Already have an account? No problem, log in here.


Log in

 
Permissions in this forum:
You cannot reply to topics in this forum