Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found
Not Found

Submitted

Product-preview-card-component using html and css

@vivek33up

Desktop design screenshot for the Product preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


Could someone help me in optimizing this site for mobile (375 width)?

Community feedback

yas 390

@yosrajalali

Posted

Hi Vivek🙋‍♀️ congratulations on successfully completing this challenge🎉.

Regarding your question: when they say Mobile: 375px it doesn't mean that you have to have a media query for width of 375px, it just means that the width of screenshot that they provide us is 375px.

any way if you want to optimize your page for mobile devices you should use media query, like this👇

{
@media only screen and (max-width: 600px){
**put your codes that are related to the mobile design here**}
}

this👆 block of code executes only If the browser window is 600px or smaller.

you can change 600px to any other width, and also you can add more than one media query base on your design.

I hope you find this helpful..

0

Please log in to post a comment

Log in with GitHub
Discord logo

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