Design comparison
Solution retrospective
I couldn't figure out how to stop "learn more" lines from braking. Any ideas?
Community feedback
- @Noob-Coder-YouPosted over 3 years ago
hey man,its a great so great i was just checking your work and found when you hover on learn more the height of the element increases and i fixed it just add border:3px solid transparent; on all the button element
Marked as helpful1 - @darryncodesPosted over 3 years ago
Hi Marko,
Really great effort and responsive. With a few tweaks it'll be perfect.
A few considerations from me:
- your border style
border: white solid 3px;
is being added to your button on hover, try adding it to the non-hovered state too and the jumping should stop
you could try this do get the button to stay at the bottom:
- wrap a div around your
<img>
<h1>
and<p>
(you should only have 1<h1>
on the page too for accessibility reasons) - add
display: flex;
flex-direction: column;
justify-content: space-between;
to column-sedan/suv/luxury or ideally create a new class. Thespace-between
value will push the button down and keep it there - you might need
align-self: start;
on the button
Marked as helpful1@ElioskasPosted over 3 years ago@darryncodes Thank you, I'll try playing around few things you suggested for sure.
I ended up using outline rather than border, because outline doesn't affect the element's size.
0 - your border style
- @MieszkoKowalikPosted over 3 years ago
Your buttons are breaking because of the display property. You can set that to block / inline-block to stop that.
Also when adding border only to hover states, it makes the elements bigger after hovering and can cause some shifting.
Marked as helpful1 - @thesohailjafriPosted over 3 years ago
learn more from breaking? I didn't shaw that on the preview.
0@ElioskasPosted over 3 years ago@thesohailjafri It happens on smaller size, before it goes into mobile mode.
0@thesohailjafriPosted over 3 years ago@Elioskas oh I see it now, add min-width to the parent element of so n so, and make learn more a button <button> element not attribute <a>
min-width won't let the parent element to go below certain width.
1
Please log in to post a comment
Log in with GitHubJoin 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