Hi @bccpadge, that's a good solution. Keep coding. I haven't solved this challenge yet, but I can give you some quick tips:
- You don't need to use the
widthproperty for yourformclass. This breaks the responsive behavior of HTML, use themax-widthormax-inline-sizeproperty instead. In fact, it's better not to use thewidthandheightproperties in CSS with explicit values (thewidthproperty can be used with the percentage size unit, it behaves the same as block-level elements). - You can add the
max-widthproperty to yourform__headlineclass to avoid making your button the full width of the page. - You can use the
flexboxfor the components and you can use thegridfor an entire layout, but it's a good project to get some practice with thegridproperty.
I hope these will help you. Keep coding and have a nice day...
Marked as helpful
@bccpadge
Posted
@adonmez04
Thank you for the feedback. Can you elaborate on which components would use flexbox in this project? I am not a fan of implementing flexbox when you have to add more code to the stylesheet.
@bccpadge You can use the display: flex; declaration for this project because it will be part of the main page and there will probably be other elements in the page. The display:grid; declaration could be for a more general element, like a container or body etc.
For your main class, you can set the flex-flow: column wrap;, if you start the mobile-first design, and at some breakpoint, you switch to the flex-flow: row wrap; for the desktop version. Basically, you can apply this ruleset to your main class instead of grid:
display: flex;
flex-flow: column wrap;
max-inline-size: 30rem;
margin-inline: auto;
You also don't need the grid property on your body element, it will have the same behavior with this margin-inline: auto; declaration. Using these tools sharply, you won't need too much code in your stylesheets.
I highly recommend reading the Flexbox and Grid sections of this resource: https://web.dev/learn/css
Marked as helpful
