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

3 Column Preview Solution

Alexā€¢ 225

@alexvalpeter

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


Any idea how to prevent the main container height from changing when hovering over buttons? Or any easier way to do a footer besides positioning it at the bottom of a full page wrap? Thank you!

Community feedback

P
Emmilie Estabilloā€¢ 5,540

@emestabillo

Posted

Hey Alex, I would put the white borders on the buttons from the get-go. This way, you are only changing the background color on hover, instead of adding an additional 2px around the button which is causing the unintended shift.

For your html, there's more than one h1 in your site, which should not be the case. Since there's no single stand-out heading in the design, I would use a hidden heading instead, like <h1>Car Rentals</h1> and hide it with an .sr-only class. Here's a brief article on it.

I suggest you consider flex or grid for your question about the footer. Absolute positioning will make the attribution overlap the content if the viewport height is less than the height of the content. It would also be great to make the site responsive by including code for medium widths.

Hope this helps!

1

Alexā€¢ 225

@alexvalpeter

Posted

@emestabillo Hi there, thanks for your suggestions! I love your idea for the hidden heading, I will definitely try to incorporate that. I had considered using grid for the footer, but I wasn't sure if it was bad practice to have nested grid elements, though you're definitely right that it would solve a lot of my problems. Thanks again!

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