@purplehippo911
Posted
Hi @Errorman2003. Congratulations on finishing with this challenge.🎈🎆🎇
As for the problems in this solution, you can start by removing the margin-top:50%
from the first section. I know your trying to center it but I can help you with that. So instead you can write in margin:5rem auto;
. This will put a margin of 5rem at the top and the bottom and a margin of auto on the left and the right.
And you should also remove the height:max-content;
, because it doesn't do anything for your section, and because adding heights make your webpage unresponsive, and then you will have to rewrite it in the media queries. So you should not use height where its not needed and you can also use padding
instead. So your section should look like this.
section {
color: hsl(0, 0%, 95%);
width: 80%;
margin: 6rem auto;
font-family: "Lexend Deca", sans-serif;
font-size: 15px;
max-width: 1000px;
display: flex;
justify-content: center;
}
And of using position relative, for aligning the buttons, you can use flexbox, and add display:flex;
in your cards.
For example:
.sedan {
width: 230px;
background-color: hsl(31, 77%, 52%);
padding: 3rem;
border-radius: 8px 0 0 8px;
}
And remember to do the same with .luxury
and .suv
.
.learn {
padding: 0.5rem 3rem;
background-color: hsl(0, 0%, 95%);
border-radius: 20px;
And instead of using section
for the footer, you can use the footer
-element, because this way just feels more right.
<footer class="footer">
</footer>
If you misunderstood anything I said then you can just write to me here. And I would recommend you to check out Kevin Powell's free course on responsiveness here:
Well done, with this challenge.
Cheers.
Marked as helpful