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

Landing page using classes and flex

@scoltelli27

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


Beginner here. It was impossible for me to make the site responsive, I know how to make a site shrink or expand according to the viewport but I found no way of changing the site completely when the user is on mobile, like the exercise asks to do.

If anyone can please help me with that I would be extremely grateful.

Community feedback

Sen-Nyin 130

@Sen-Nyin

Posted

The trick to having your flex box change for screen size is with your media query and having flex direction change from column to row, but keep up the good work it looks great

Marked as helpful

1

@scoltelli27

Posted

@Sen-Nyin Thank you! I'll go over flexbox again and try your idea.

0

@ruancostacampos

Posted

Hello, scoltell27. I'm seeing youre working hard. I think you can improve your css by improving your flexbox skils, and after that you can do something adapt to mobile devices using the css @media screen and (max-width: px ) query.

Marked as helpful

1

@scoltelli27

Posted

@ruancostacampos Thank you so much! Will do so

0
cacosted 570

@cacosted

Posted

Hello scoltelli27, I noticed that the link to the repository is broken, I searched I find out that the problem is a '.git' at the end of the link. If you delete this I think that your link should be working again

Marked as 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