Latest topics
» Hello everyone this is Adam from France
by Milouze14 Tue 21 Nov 2017, 13:23

» Auto-suggest @mentions as You Type
by T.C. Tue 21 Nov 2017, 12:36

» Personal Rank Titles
by T.C. Tue 21 Nov 2017, 12:04

» FM Themes
by SLGray Tue 21 Nov 2017, 01:08

» User - Made Creations
by SLGray Tue 21 Nov 2017, 01:07

» Search box only visible on hover
by SLGray Tue 21 Nov 2017, 00:58

» Browsers & Updates
by SLGray Tue 21 Nov 2017, 00:56

» Change newposts/no new posts/ locked icons
by T.C. Mon 20 Nov 2017, 19:52

» [HELP] About Profile Cover Code
by MaHwOs Sun 19 Nov 2017, 18:54

» bloquer un membre
by berlingo Fri 17 Nov 2017, 18:19

» IconSkouliki Graphics
by skouliki Fri 17 Nov 2017, 03:54

» [IN PROGRESS] Can this code work on pun version
by skouliki Thu 16 Nov 2017, 03:50

» [TUTORIAL] [ALL VERSIONS] Warning before posting
by demon99 Wed 15 Nov 2017, 08:12

» About Add Reply & New Topic button (popup form)
by omarpop23 Mon 13 Nov 2017, 20:31

» Add a login popup for the toolbar
by Ape Sun 12 Nov 2017, 18:41

Recent Tutorials
Who is online?
In total there are 9 users online :: 0 Registered, 0 Hidden and 9 Guests :: 1 Bot

None

[ 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 : 30
Posts : 36
Points : 312
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/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 : 22
Posts : 4712
Points : 9589
Reputation : 2341
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 : 30
Posts : 36
Points : 312
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/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 : 22
Posts : 4712
Points : 9589
Reputation : 2341
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 : 30
Posts : 36
Points : 312
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/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 : 22
Posts : 4712
Points : 9589
Reputation : 2341
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 : 30
Posts : 36
Points : 312
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/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 : 22
Posts : 4712
Points : 9589
Reputation : 2341
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