ahmedtwilight
commented
12 months ago To display the profile previews side by side, you need to wrap them in a container and apply CSS to that container to make them display inline or inline-block. Here's how you can modify your code:
HTML:
CSS: .profile-container { white-space: nowrap; } .profile-preview { width: 200px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); display: inline-block; margin-right: 15px; vertical-align: top; } Rest of the CSS styles remain unchanged In the HTML code above, I wrapped the .profile-preview elements inside a .profile-container div. Then, in the CSS code, I added white-space: nowrap; to the .profile-container to prevent the profiles from wrapping to the next line. Additionally, I added vertical-align: top; to align the profiles at the top within the container.
With these modifications, the profile previews should appear side by side instead of stacked on top of each other.
Even when I copy and paste the example html and css code, the divs all appear stacked on top of one another instead of side by side, any ideas why?
Mooncat
10 mutual friends
Andy Frasco
18 mutual friends
Derek Vincet Smith
4 mutual friends
`p { font-family: Arial; margin-top: 0; margin-bottom: 0; }
.profile-preview { width: 200px; box-shadow: 0 0 5px rgba(0, 0, 0, 0.3); display: inline-block; margin-right: 15px; }
.profile-picture { width: 200px; height: 200px; object-fit: cover; margin-bottom: 12px; }
.name { font-size: 18px; font-weight: bold; margin-left: 8px; margin-bottom: 4px; }
.mutual-friends { font-weight: 500; color: rgb(100, 100, 100); margin-left: 8px; margin-bottom: 12px; }
.add-friend-button { background-color: rgb(24, 119, 242); color: white; font-size: 16px; margin-left: 8px; margin-bottom: 10px; padding: 10px 20px; border: none; border-radius: 4px; } `