yishak abrham• 2,150
@yishak621
Posted
The design is not responsive for smsll screens so write a media query
Marked as helpful
0
Submitted
Desktop solution using CSS Flexbox - Product preview card component
Fathima Nuha• 30
@Fathima-Nuha
Design comparison
Solution retrospective
I've used the most updated knowledge I have learned so far! More to go! Have used flex, Do update me about places I could have used grid.
Community feedback
Hassia Issah• 50,670
@Hassiai
Posted
Replace <div class="both"> with the main tag, <h5> with <p></p> tag to fix the accessibility issues. Add lang= "en" to the html tag to fix the error issue with the html file . for more on semantic html visit https://web.dev/learn/html/semantic-html/
Use rem or em as unit for the padding , margin, width and preferably rem for the font-size for more on this watch this https://youtu.be/N5wpD9Ov_To
To center .both on the page, add min-height:100vh; display: flex; align-items: center: justify-content: center; to the body. instead of giving .both a margin value.
Give .both a height value of auto instead of height: 430px; Increase the padding value for .btn and reduce the border-radius value.
You forgot to add a media query for the mobile design, in the media query give the width of .both a percentage value of 80 or 90.
Hope am helpful Well done fir completing this challenge. HAPPY CODING
Marked as helpful
0
AbdelRahman Elrefai• 190
@ar-refai
Posted
Hello There Nice Work Fathima
-
I recommend that you consider adding <!DOCTYPE> declaration at the start of your HTML Document read about it from Click Here
-
also you should use css to change background color instead of using bgcolor attribute ,read HTML validation above.
-
I noticed that you use only <div> element in your HTML page , I Strongly recommend to wrap all the main content in a <main> element. Read More About Semantic Elements From Click Here
-
this is my solution for this challenge feel free to look at it and other solutions as well : Solution Link
Keep Up The Good Work. I hope the comment was helpful
Marked as helpful
0
Fathima Nuha• 30
@Fathima-Nuha
Posted
@Abdelrahman-Elrefai could you help me with not using div and wrapping. how it is done, and hat is the difference.
1
AbdelRahman Elrefai• 190
@ar-refai
Posted
@Fathima-Nuha you can read more about sementic elements from W3Schools Semantic Elements as I mentioned before , for more declaration:
-
it lets you define an element’s content purpose on your site. it's like you use <main> tag to let the browser and who ever reads the code to know this is the main part of the page, use the <header> tag to let it know this is the header , use the <footer> tag to let it know it is the footer section of the page and so on..
-
it makes your website efficient and it's performance in search engines much better.
and for how it is used it is the same as using <div> tag nothing different but the relation between the content and the tag itself and the meaning of the content that the tag holds..
Marked as helpful
1
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