Submitted almost 3 years ago

Mobile first website using scss and bem

TiredQuan• 245

@TiredQuan

Preview site View code

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

I had a hard time nailing the exact design of the card's border-top, mine curved with the card but the one in the design doesn't do that, so I'm a little puzzled by that

Community feedback

Chamu• 12,970

@ChamuMutezva

Posted almost 3 years ago

Greetings TiredQuan

notably missing in your html structure are semantic html elements like header, main etc. Where possible avoid using the div if there is a more suitable element.
a site has to have at most one h1 element - which points me back to the issue I mentioned above. One of the div must be an h1

Happy coding

Marked as helpful

Patrick• 14,325

@palgramming

Posted almost 3 years ago

your issue is at the point where your mobile layout becomes your desktop half your desktop layout ends up outside the browser window. This challenge works good with a middle transition of 2 columns with 2 cards. This is easy to do using grid template areas to be able to rearrange cards with a few lines of code

Marked as helpful

TiredQuan• 245

@TiredQuan

Posted almost 3 years ago

@palgramming I just changed the flexbox I used in the cards to grid and added another media query for 1200px

Thanks a thousand btw, I wouldn't know if I was wrong if it wasn't for you!

Patrick• 14,325

@palgramming

Posted over 2 years ago

@TiredQuan No problem glad I was able to help

Please log in to post a comment

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