Context and Issue
I am currently working on this specific page, with a focus on the "Top Artists" section.
Desired Outcome:
- When viewed from a laptop, I aim for the cards to be displayed as vertical rectangles, where the ranking is at the top, followed by the image in the middle, and the artist's name at the bottom. These cards should have the same width and height, aligned horizontally with the "#1" card on the left and the "#5" card on the right.
- For mobile devices, my goal is to have the cards appear as horizontal rectangles, with the ranking on the left, image in the center, and artist name on the right. Similar to the laptop view, these cards should share the same measurements.
Current Outcome: At present, the layout seems to match my laptop expectations (except for the placement of the "Top Artists" title). However, on mobile, the cards display varying widths.
Supporting Information
This is how it currently appears on a laptop:
https://i.stack.imgur.com/cSmnT.png
And this is the current appearance on a mobile device:
https://i.stack.imgur.com/iON4Jm.jpg
Code Snippet
Here is the CSS code within my <style></style> tags:
.top-artists {
/* CSS rules */
}
/* Additional CSS styles */
@media (max-width: 500px) {
/* Responsive styles for smaller screens */
}
Below is the snippet responsible for creating the artist cards:
<!-- HTML code snippet goes here --> Implementing Suggestions
Following advice provided by other users, I made changes within the @media rule, but did not achieve the desired outcome. Here's a screenshot showcasing the result:
https://i.stack.imgur.com/DsUi8m.jpg
Another suggestion was to use width:100% within the @media query, resulting in all cards being of equal size but vertically oriented. My preference, however, is to have them arranged horizontally. Here's a glimpse with width:100% applied: