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

SedanSuvLux using Flexbox

gustek 250

@guusteak

Desktop design screenshot for the 3-column preview card component coding challenge

This is a solution for...

  • HTML
  • CSS
1newbie
View challenge

Design comparison


SolutionDesign

Solution retrospective


I woud be very grateful if someone could explain me how to fix the mobile view issue (i mean the borders of container) and why the SUV section disappears when you change the viewport to smaller one. To everyone who reads this, have a good day!

Community feedback

szam 800

@k-stopczynska

Posted

Hi! Congratulations on finishing the challenge:)

According to your questions:

  1. You need min-height property for the body so the container won't get cut out at the end of the viewport height.

  2. Using flex can be tricky. Use flex-direction: column on the container and it will appear like in the design. Also consider if flex-wrap is really needed there. It lookes awkward with tablet resolution. Instead you can use flex-direction with media-queries for different viewports.

As far as I can see you didn't match design on hover states. Just improve background-color on buttons and you'll be ok. Even if image is just decoration and is not meaningful for understanding the page- always use alt attribution. Check out your accessibility report- it's very useful. Especially the part about the headings- you should't use h2 if there is no h1. Read about html tags: there is no need for using so many divs. For this one- section would be great. When you are styling many similar elements- use classes (all the h2 and p have the same styling, you don't need to use classes of their parents, get another class only for this elements). The code would be more readable.

Overall it looks pretty similar to the design. Keep on coding and you'll get there:)

Marked as helpful

1

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