I have badges that are displayed on profile pages But there is this block of white space that fills in. I am not sure how to position the badges appropriately. I tried playing around with no using div but it just looked like a mess. I am not really an expert at CSS, so I am wondering how to fix the positioning on the page.

Here's a screenshot: View Page

My Code:

<style>
    .badgecss1 {
        float: left;
        position: absolute;
        top:140px;
        left:100px;
    }
    .badgecss2 {
        float: left;
        position: absolute;
        top:140px;
        left:150px;
    }
    .badgecss3 {
        float: left;
        position: absolute;
        top:140px;
        left:200px;
    }

    .in-para {
        right: 520px;
        top: 70px;
        position: relative;
        display: inline;
    }
</style>

<div style="text-align: center">
    <h4 style="position:absolute; top:100px;" >Badges:</h4>

    <% @user.badges.each_with_index do |b,i| %>
        <div id="badgecss<%=i 1%>" >
            <%= image_tag(b.custom_fields[:image], width: "7.1%", title:b.description, ) %>
        </div>
    <% end %>

    <div style="position:sticky;">
        Followers: <%= link_to @user.followers.count, user_followers_path(@user.username) %> 

        <% if @user.avatar.present? %>
            <%= image_tag(@user.avatar.variant(resize_to_fill: [130,130]), 
            class: "rounded-circle", style: 'border:2px solid black;') %>
        <% else %>
            <%= image_tag 'default-pfp.png', style:'max-width:10rem;'%>
        <% end %> 
        
        Following: <%= link_to @user.followings.count, user_followings_path(@user.username) %> </p>
    </div>
    <h3> @Serena99 </h3>
    <p> Motto: "<%= @user.motto %>" </p>
</div>

CodePudding user response：

Start by wrapping the h4 and badges in a <div >.

CodePudding user response：

Wrap <h4> and Image wrapper <div> in one <div ></div> element and add below css:

.badge-wrapper{
   display: flex;
   align-items: center;
}