Responsive product preview card using flexbox

Solution retrospective
Hey, guys!
- I noticed that I'm always having troubles with deciding what should I explicitly size first: the image itself or its container?
- for example, my approach was to first ask myself: how big do I want the whole stuff to be (left plus right pannel). Then I set the container width then I figured out that I want the picture to be half of the container so I went and I set a width on the picture. Is there any better approach in scenario like this (left panel image + right panel text)?
- last question: what would be the best approach to change the img dinamically based on the viewport size? This time I used the html picture tag, do you usually do it differently? I read that there is some way by making it the background image or something.
Thanks for reading, if you see anything else that I did which is fishy, please let me know!
Please log in to post a comment
Log in with GitHubCommunity feedback
- @pRicard0
HTML tips
- Add
aria-hidden="true"
andfocusable="false"
to the SVG element to hide it from technologies such as screen readers. - Instead of using the tag
<p>
with the text "$149.99", you can use the<em>
tag. The<em>
tag is used to define emphasized text. The content inside is typically displayed in italic. A screen reader will pronounce the words in<em>
with an emphasis, using verbal stress. - You can use the tag
<s>
instead of the tag<span>
with the text "$169.99". The<s>
tag specifies text that is no longer correct, accurate or relevant. The text will be displayed with a line through it by default.
CSS tips
- You can add
transition: 200ms;
to your button for a smoother color change.
Marked as helpful - Add
Join our Discord community
Join thousands of Frontend Mentor community members taking the challenges, sharing resources, helping each other, and chatting about all things front-end!
Join our Discord