Attention:

Support Rules and Guidelines
Before you post your support topic, please remember to:
  • Read the support forum rules.
  • Check the wiki and use search to see if your problem can be answered there first.
  • Link your board please, and make sure that the problem on your board is visible to guests or provide a test account.
  • Do not post Board Wrappers and CSS unless requested. With a board link, this is not necessary.
  • Be as descriptive as you can and use as many details as possible when describing your problem.
  • Please briefly mark any links to forums that may not be work-safe.
This will help ensure your support issue will be attended to in a quick and efficient manner.

  Add ReplyNew TopicNew Poll

 mini profile alignment issue
#
Hi guys! So my mini profile on the site I am working on the fields aren't lining up side by side (2 by 2) like they should be and thus the alias and bottom gif are getting cut off. I thought it was there was to much info in the field and thus cause the box to expand but that isn't the case. Any ideas?

Here is a topic with the mini profile filled out. Link For some reason age is by itself and PM is by itself. Age and sexuality should be on the same row one in the blue and one in the pink.

The attachment is how it should look.

Thanks in advance for your help!

Attached 1 File(s)
Attached Image
PM
#
Hi, this is because the margin-bottom for the alias is too high, making it so that the box can't go in that space. Go to your .minii-nickn and change the code to 35px (or something lower if that doesn't help) and you're golden.

CODE
.minii-nickn { display: inline-block;
 padding: 5px;
 font-family: 'Roboto';
 font-weight: 900;
 font-size: 30px;
 color: #bbb;
 letter-spacing: -2px;
 text-transform: lowercase;
 float: right;
 margin-top: 20px;
 margin-bottom: 37px;}


to

CODE
.minii-nickn { display: inline-block;
 padding: 5px;
 font-family: 'Roboto';
 font-weight: 900;
 font-size: 30px;
 color: #bbb;
 letter-spacing: -2px;
 text-transform: lowercase;
 float: right;
 margin-top: 20px;
 margin-bottom: 35px;}
#
So I tried the suggested fix, even went down to 30px on the margin bottom but it still didn't seem to work. Everyone's seems to be all out of line. I attached a copy of the one from before still showing it off alignment and then attached another one that is really out of alignment. Super confused on what is happening. :S

Slight Alignment Issue Link

Major Alignment Issue Link


***Side note, PM/Alert notifications aren't working either. I turned the setting on but not sure what else I am missing.

This post has been edited by nyxnstyx: Dec 10 2017, 11:44 PM

Attached 2 File(s)
Attached Image Attached Image
PM
#
The error is in using the float property incorrectly. Remember that while floats can be used in layouts, it's generally more appropriate to use when shifting large text fields. Remove the float property on .minii-gif1, and apply display:inline-block; to it instead.

EDIT::

Since the username field length is so volatile, very short and very long names will tend to disrupt the flow of the elements (as in the case of the username 'z' in the examples in the post prior to this one). In this case, I would recommend applying position:relative to the miniprofile .minii, to the username field .nickn, removing the float:right; from .nickn, and applying a percentage-based width and a text-align:right; to .nickn. You may also need an overflow property to deal with extremely long names. This should effectively realign the elements as desired.

This post has been edited by Dusty: Dec 11 2017, 02:41 PM
PM
#
In addition to what Dusty says, you should also put a container for those specific fields so it's easier to position ALL of them and that way it's not subject to whether or not the alias is small or large because it doesn't rely on it.
#
This has been a big help! I've gotten some of it fixed by implementing some of what Dusty suggested. Mini Profile code is definitely not my strong suit in anyway shape or form. The idea of adding a container for the specific fields would be nice so that it is easier to position them. I don't know how to go about that doing that. What would the code be that I need to add? And where would I need to put it?

This post has been edited by nyxnstyx: Dec 11 2017, 05:36 PM
PM
#
All adding a container means is to wrap .minii-gif1 and .nickn in another element.
PM
0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:
Share this topic:
« Next Oldest | General Support | Next Newest »

Options Add ReplyNew TopicNew Poll