Profile Image bottom spacing

[f.staude]

On the Profilepages, depends on number of badges and string length, are views possible In which the badges stick directly under the avatar icon.
Example: my profile ​https://profiles.wordpress.org/fstaude/ on a tablet.

My suggestion:
In ​https://buddypress.org/wp-content/themes/profiles.wordpress.org/style.css?ver=12 change

div#item-header img.avatar {
    float: left;
    margin: 0 20px 0 3px;
}

to

div#item-header img.avatar {
    float: left;
    margin: 0 20px 10px 3px;
}

I would have attached a patch. But I have not figured out how to use vvv and the meta-enviroment to commit to profiles.wordpress.org. If someone has a tip or a URL, just tell me.

[f.staude]

correct screenshot from ipad

[f.staude]

Sorry. 2016-04-25_1824.png is a wrong file and can be deleted. IMG_0163.PNG is the correct screenshot from the ipad.

[iandunn]

The Profiles theme hasn't been open-sourced yet, so it's not in the Meta Environment.

Just adding the CSS in a Trac ticket/comment is fine for small changes like this, though.

I think it still looks a bit odd, though, even with the new margin. It seems like it'd make more sense to have #user-badges be a blocking element, let the badges take up 100% of the content area, and center-align them.

[danieltj]

What about the following CSS? I'll add an image of what it looks like.

@media screen and ( max-width: 960px ) {

  div#item-header #user-badges {
    width: 100%;
    margin-top: 30px;
  }

  div#item-header #user-badges li {
    float: left;
  }

}

[danieltj]

Updated profile page

[mp518]

Already added 100% width ul.item-list so just add width auto also margin will only 10px should be look good if there is any changes then let me know.below media query css available.

@media screen and ( max-width: 960px ) {
        div#item-header #user-badges{
            width:auto;
            margin: 10px 0 0 0;
        }
        div#item-header #user-badges li {
            float: left;
        }
}

[mp518]

after change screenshot

[melchoyce]

I like the spacing in wp-profiles.png​.

[danieltj]

Replying to melchoyce:

I like the spacing in wp-profiles.png​.

I'm happy to commit the changes, just need to figure out how to commit them to this ticket for review :')

[SergeyBiryukov]

Replying to danieltj:

I'm happy to commit the changes, just need to figure out how to commit them to this ticket for review :')

Profiles theme is not open-sourced yet (see #1152), so adding the relevant styles in a comment like comment:3 is fine. Someone with access to dotorg Trac should be able to take it from there :)

[danieltj]

Replying to SergeyBiryukov:

Replying to danieltj:

I'm happy to commit the changes, just need to figure out how to commit them to this ticket for review :')

Profiles theme is not open-sourced yet (see #1152), so adding the relevant styles in a comment like comment:3 is fine. Someone with access to dotorg Trac should be able to take it from there :)

Thanks! Adding my code I posted above underneath the div#item-header #user-badges li selector on line 360 does the trick nicely and replicates the screenshot I provided.

[coffee2code]

Fixed in [13369-dotorg] :

Profiles: Improve spacing and display of badges at smaller viewport sizes.

Switches to full-width with improved vertical spacing.

Props danieltj.
See #2211.

and [13370-dotorg]:

Profiles: Improve spacing below avatar image (necessary at smaller viewport sizes).

Props fstaude.
Fixes #2211.