Design comparison
Solution retrospective
I have a few questions about this project and would appreciate any feedback or resources.
-
The text description of the vehicles is spaced similarly to the model, however I could not get the columns to be even (the yellow is more narrow than the other two). I was wondering how other people approached this problem. I adjusted the margins and padding, but was wondering if putting the paragraph text in nested divs would be better.
-
I couldn't get the buttons to center, even when adjusting margins and padding. I tried to treat them as flex items as well, but couldn't properly center them.
-
The text on the buttons should be the same color as the background- but I'm unsure how to approach this. Can you change the opacity of text? Did you just make the text the same color as the background to match?
Community feedback
- @darryncodesPosted almost 3 years ago
Hi Gracie,
Really great effort, well done!
- I would avoid using padding and margin to position content. FlexBox will do all that for you. I quickly removed the padding from
yellow-column
blue-column
andgreen-column
and it has help dramatically. I'd encourage you to really familiarise yourself with the box model - You could also make those columns a flex container and have control over positioning the flex items (the button) easily. This is an invaluable comprehensive flexbox guide
- Your design is not mobile responsive. You should take some time to understand how media queries work. You could then change the flex direction of
.wrapper
toflex-direction: column
at a mobile breakpoint to make it responsive. You'd need to change the location of the border-radius on the corners when the design becomes a column. - This is a handy guide to styling buttons that I think will really help you
I think you did really well, and creating projects is the best way to learn. So keep it up!
Any questions let me know.
Marked as helpful1@graciedevinePosted almost 3 years ago@darryncodes Thank you so much! I'll look at these resources in more depth and let you know if I have any more questions!
0@graciedevinePosted almost 3 years ago@darryncodes Hi there, I removed the column padding and turned the buttons into flex items! I was wondering though, could you help me with making my footer mobile responsive? I tried with several different positions, but besides "fixed" I couldn't find a way to make it stay at the bottom (the problem with position: fixed now is that it overlaps with the wrapper when the screen gets smaller).
0@darryncodesPosted almost 3 years agoHi @graciedevine
Yeah sure and good call re the fixed position.
I would:
- add
flex-direction: column;
to your<body>
- remove
padding-left: 70px;
from.card
(this has nothing to do with the footer but helps the layout) - remove
position: fixed;
bottom: 20px;
from.attribution
- add add some
margin: 1.5em 0;
(this is shorthand for 1.5em top & bottom, 0 left & right) to.attribution
to space things out a little
I hope that is what you're looking for
Marked as helpful1 - I would avoid using padding and margin to position content. FlexBox will do all that for you. I quickly removed the padding from
- @therealmaduanusiPosted almost 3 years ago
- let the container of the grid have an equal fractional units(1fr 1fr 1fr)
- specify the width and use (text-align: center;) 3).whatever you named it :hover{ background-color: transparent; border: 2px solid hsl(0, 0%, 95%); color: hsl(0, 0%, 95%); } I hope this helped or you check my own and see if there's any thing you need THANKS. Also your trying, keep it up we are all learning don't stress to much OK.
Marked as helpful1@graciedevinePosted almost 3 years ago@therealmaduanusi Thank you! I will give these a try!
0
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