Product preview card component using @media and flexbox
Design comparison
Solution retrospective
My main takeaway from this challenge was understanding the importance of CSS rules and their priority. Having to make multiple sets of CSS rules with the @media rule is required to design a layout for desktop and mobile.
If I could do something different, it would be to learn more about responsive web design. While I was able to make the mobile design match the requirements. I was not able to make the desktop design fully responsive when the resolution started to become smaller than a certain width as it would be cut off instead of adjust as needed.
What challenges did you encounter, and how did you overcome them?The first challenge I encountered was making sure that based on resolution size that only the desktop or mobile image would be visible. Not only did it require using @media and (min-width) and (max-width) CSS rules. I had to disable both images from being seen and then have them be visible within the nested @media CSS rules.
What specific areas of your project would you like help with?What I need help with this project is to understand how to make every element in the HTML framework responsive.
I still have trouble understanding what I should be doing to have the text or images inside an HTML element be responsive as the resolution of the webpage increases or decreases in resolution.
Using div elements as containers and then using flexbox for each div element can't be the only solution. Because I don't know how to set a maximum size and then have it and the elements shrink when the resolution gets smaller. My designs always takes up the entire webpage unless I set a specific width and height in pixels but that removes the ability of the design to be responsive.
Community feedback
- @ToumariPosted 4 months ago
Hello,
Firstly well done on finishing the challenge, it looks great!
Just a few small things that I'd like to think are helpful tips:
-
When you're selecting elements, I'd generally try to avoid selecting actual tag elements such as p or h1,h2 etc. Generally it's best to apply a class to a target element and then apply styles. This is to avoid rigidity if your website or app expands to have p tags that require additional styling and reduces the chance of specificity causing issues!
-
You're specifying fonts like 'Montserrat' etc in your CSS but not providing a fallback font if the browser is unable to pull that resource for any reason, it's best to provide one by doing: font-family: "Montserrat", sans-serif;
Overall though you've done an amazing job and should be very happy!
0 -
- @beowulf1958Posted 4 months ago
Congratulations on completing this challenge. Your solution looks awesome, and the code is clean, well organized, and thoroughly documented.
However, you are using the h1 tags incorrectly. Heading tags-- h1 - h6 --are meant to structure the page, not to style an element. That is, the h1 is the title of your page, h2 is a subheading of h1, h3 is a main point under h2, etc. Headings create a hierarchy that makes it easier for SEO, accessibility, and helps the reader understand your page. To make text bigger, use CSS. That is why we have CSS.
Otherwise, the page is well structured and semantic, with main and footer sections. And the page is responsive, and looks great at mobile and desktop. Hope this helps, and keep on coding
0
Please log in to post a comment
Log in with GitHub
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