I'm struggling to add padding around the image without affecting the mobile view. Here's what I've tried:
float-right or padding-right:250px; // but nothing happens and it affects the mobile view.
Please review my code:
.fontProfile {
font-family: "Open Sans", Arial, sans-serif;
/* min-height: 100vh;
background-color: #fafafa;
color: #262626;
padding-bottom: 3rem; */
}
.imgProfile {
display: block;
}
.containerProfile {
max-width: 93.5rem;
margin: 0 auto;
padding: 0 2rem;
}
... (remaining CSS code omitted)
<header>
<div class="container containerProfile">
<div class="profile">
<div class="profile-image">
<img class="imgProfile" src="https://images.unsplash.com/photo-1513721032312-6a18a42c8763?w=152&h=152&fit=crop&crop=faces" alt="">
</div>
<div class="profile-user-settings">
<h1 class="profile-user-name fontProfile">janedoe_</h1>
<button class="btnProfileIn profile-edit-btn">Edit Profile</button>
<button class="btnProfileIn profile-settings-btn" aria-label="profile settings"><i class="fa fa-cog" aria-hidden="true"></i></button>
</div>
... (remaining HTML code omitted)
</div>
</header>There is significant space between the image and the name. I want that div to be closer to the rest of the content.
This screenshot shows the issue - The gap
If you have any ideas or suggestions, please let me know.