I’m trying to align the text and images to look like this:
but instead it looks like this:
Here’s the html and css that I used:
:root {
font-size: 10px;
}
*,
*::before,
*::after {
box-sizing: border-box;
}
body {
font-family: "Open Sans";
Arial,
sans-senrif;
min-height: 100vh;
background-color: #fafafa;
color: #262626;
padding-bottom: 3rem;
}
img {
display: block;
}
.container {
max-width: 93.5rem;
margin: 0 auto;
padding: 0 2rem;
}
.btn {
all: unset;
background: none;
color: none;
display: inline-block;
cursor: pointer;
border: none;
}
.btn:focus {
outline: 0.5rem auto #4d90fe;
}
.visually-hidden {
position: absolute !important;
height: 1px;
widows: 1px;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
}
.profile {
padding: 5rem 0;
}
.profile::after {
content: "";
display: block;
clear: both;
}
.profile-image {
float: left;
width: calc(33.333% - 1rem);
display: flex;
justify-content: center;
align-items: center;
margin-right: 3rem;
s
}
.profile-image img {
border-radius: 50%;
}
.profile-user-settings,
.profile-status,
.profile-bio {
float: left;
width: calc(66.666% - 2rem);
}
.profile-user-settings {
margin-top: 1.1rem;
}
.profile-user-name {
display: inline-block;
font-size: 3.2rem;
font-weight: 300;
}
.profile-edit-btn {
font-size: 1.4rem;
line-height: 1.8;
border-radius: 0.3rem;
border: 0.1rem solid #dbdbdb;
padding: 0 2.4rem;
margin-left: 2rem;
}
.profile-settings-btn {
font-size: 2rem;
margin-left: 1rem;
}
.profile-status {
margin-top: 2.3rem;
}
.profile-status li {
display: inline-block;
font-size: 1.6rem;
line-height: 1.5;
margin-right: 4rem;
cursor: pointer;
}
.profile-status li:last-of-type {
margin-right: 0
}
.profile-bio {
font-size: 1.6rem;
font-weight: 400;
line-height: 1.5;
margin-top: 2.3rem;
}
.profile-real-name,
.profile-stat-count,
.profile-edit-btn {
font-weight: 600;
}
.profile-real-name {
padding-top: 100px;
}
.gallery {
display: flex;
flex-wrap: wrap;
margin: -1rem -1rem;
padding-bottom: 3rem;
max-height: 4%;
max-width: 4%;
}
.gallery-item {
position: relative;
flex: 1 0 22rem;
margin: 1rem;
color: #fff;
cursor: pointer;
}
.gallery-item:hover .gallery-item-info,
.gallery-item:focus .gallery-item-info {
display: flex;
justify-content: center;
align-items: center;
position: absolute;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, .3);
}
.gallery-item-info {
display: none;
}
.gallery-item-info li {
display: inline-block;
font-size: 1.7rem;
font-weight: 600;
}
.gallery-item-likes {
margin-right: 2.2rem;
}
.gallery-item-type {
position: absolute;
top: 1rem;
right: 1rem;
font-size: 2.5rem;
text-shadow: 0.2rem 0.2rem 0.2rem rgba(0, 0, 0, .1);
}
.gallery-item {
max-width: 100%;
max-height: 100%;
object-fit: cover;
}
@media screen and (max-width: 40rem) {
.profile {
display: flex;
flex-wrap: wrap;
padding: 4rem 0;
}
.profile::after {
display: none;
}
.profile-image,
.profile-user-settings,
.profile-bio,
.profile-status {
float: none;
width: auto;
}
.profile-image {
width: 7.7rem;
}
.profile-user-settings {
flex-basis: calc(100% - 10.7rem);
display: flex;
flex-wrap: wrap;
margin-top: 1rem;
}
.profile-user-name {
font-size: 2.2rem;
}
.profile-edit-btn {
order: 1;
padding: 0;
text-align: center;
margin-top: 1rem;
}
.profile-bio {
font-size: 1.4rem;
margin-top: 1.5rem;
}
}
@supports (display: grid) {
.gallery {
display: grid;
grid-template-columns: 1fr 2fr;
grid-template-rows: repeat(3, auto);
grid-column-gap: 3rem;
align-items: center;
size-adjust: 100%;
}
}
.profile-image {
grid-row: 1 / -1;
}
.profile-image,
.profile-user-settings,
.profile-status,
.profile-bio,
.gallery-item,
.gallery {
width: auto;
margin: 0;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Instagram Profile</title>
<link rel="stylesheet" href="https://fonts.googleleapis.com/css?family-Open+Sans:300,400,600">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
<header>
<div class="container">
<div class="Profile">
<div class="profile-image">
<img src="https://64.media.tumblr.com/da7f5479f2bf356eb368bec06c870a30/e2414f7430c29281-5a/s140x140/f22fdcd07c794bc0998b8f5e1fcc80ff679124af.jpg" alt="">
</div>
<div class="profile-user-settings">
<h1 class="profile-user-name">Gothixq</h1>
<button class="btn profile-edit-btn">Edit Profile</button>
<button class="btn profile settings btn" aria-label="Profile Serrings"><i class="fas fa-cog" aria-hidden></i></button>
</div>
<div class="profile-status">
<ul>
<li><span class="profile-stat-count">4</span> posts</li>
<li><span class="profile-stat-count">2,009</span> followers</li>
<li><span class="profile-stat-count">10</span> following</li>
</ul>
</div>
<div class="profile-bio">
<p><span class="profile-real-name">Gothixq</span> laurem ipsum</p>
</div>
</div>
</div>
</header>
<main>
<div class="container">
<div class="gallery">
<div class="gallery-item" tabindex="0">
<img src="https://64.media.tumblr.com/7059922275f1801feac7707bb9aef733/373baf7fb6552c0f-bd/s540x810/4a1f5a2a7e500fa9de1a5647b091cf73551cbf21.gifv">
<div class="gallery-item-info">
<ul>
<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
<li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>
</ul>
</div>
</div>
<div class="gallery-item" tabindex="0">
<img src="https://64.media.tumblr.com/4fc5ff97f019840c8684b806e3e4dcad/373baf7fb6552c0f-c2/s540x810/406a23f76d40542dffe2821223520fe4341daae8.gifv">
<div class="gallery-item-info">
<ul>
<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
<li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>
</ul>
</div>
</div>
<div class="gallery-item" tabindex="0">
<img src="https://64.media.tumblr.com/31a5d712713237e4bfd1af8636d753ed/373baf7fb6552c0f-84/s540x810/27ab2876e0b226cb1961e1f186ea7ab12ca21362.gifv">
<div class="gallery-item-info">
<ul>
<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
<li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>
</ul>
</div>
</div>
<div class="gallery-item" tabindex="0">
<img src="https://64.media.tumblr.com/9bb4405d8d25e2b4cbc73917085833b7/373baf7fb6552c0f-d5/s540x810/e5d4035281ceb86c6c99ce801350b909b357d579.gifv">
<div class="gallery-item-info">
<ul>
<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
<li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>
</ul>
</div>
</div>
<div class="gallery-item" tabindex="0">
<img src="https://i.pinimg.com/564x/09/02/7c/09027c75ea12ecab37c7da67fce5ba5c.jpg">
<div class="gallery-item-info">
<ul>
<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
<li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>
</ul>
</div>
</div>
<div class="gallery-item" tabindex="0">
<img src="https://i.pinimg.com/564x/ed/b7/f9/edb7f95c63f3ce3b3fbc377e5d7330f4.jpg">
<div class="gallery-item-info">
<ul>
<li class="gallery-item-likes"><span class="visually-hidden">Likes:</span><i class="fas fa-heart" aria-hidden></i> 500</li>
<li class="gallery-item-comments"><span class="visually-hidden">comments:</span><i class="fas fa-comment" aria-hidden></i> 30</li>
</ul>
</div>
</div>
</div>
</div>
<div class="loader"></div>
</main>
</body>
</html>I tried a bunch of things, like grouping all the images into one div class but that just messes with the likes & comments overlay, any help?
New contributor
aestellatv is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.
1
It would be best if you used CSS-grids, adding the display of grid to your parent element and choosing the required number of columns for each row by modifying grid-template-columns
See this example:
body {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
overflow-x: hidden;
}
.title {
font-size: 2rem;
margin-bottom: 20px;
}
.grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 1.5rem;
}
.grid div {
width: 100px;
height: 100px;
background: skyblue;
border-radius: 10px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 2rem;
}<div class="title">Star Wars</div>
<div class="grid">
<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
</div>