All suggestions and hints are welcome. Thank you. :)
NixyMc
@Nix7amcmAll comments
- @Ola135Submitted over 1 year ago@Nix7amcmPosted over 1 year ago
Hey @Ola135! π
Excellent job with this challenge! π
I have just a couple tips that might be helpful!
First, you might consider setting your breakpoint to something around
920px
, switching to column a little earlier to prevent the box width becoming too small as the screen size narrows.Then, within your query, to prevent the boxes then being too wide, you could set a
max-width
to your.card
element, maybe something around500px
. You could play around with this to see what you like best!I hope this helps! Great work! ππππ»
Marked as helpful1 - @joshjavierSubmitted over 1 year ago
Another solution to practice my 11ty chops! This time, I used PostCSS instead of Sass to implement a modular CSS structure. I also used fluid type and space scales generated from Utopia.fyi to move away from breakpoints - I find it very pleasing to work with and will definitely keep using fluid scales for future projects.
Let me know if you have any feedback! Btw, the CSS is minified via PostCSS, so if you want to inspect the source code, check out the
src
directory in the repo. Thanks! :)@Nix7amcmPosted over 1 year agoHey @joshjavier! π
Thanks so much for your tips on my code for this challenge! I put them to use and checked out the link you shared. I'm working on learning more about A11y in particular at the moment, and welcome any advice for it π
I then noticed you did the same challenge, so had a mosey too! It really looks great and I'm very impressed with your use of PostCSS! I'm also very interested in the use of clamp etc, so am definitely going to check out utopia.fyi! It can be very tedious so this looks like a very helpful tool!
I have a couple of tips for you that might be helpful!
First, the max/default
font-size
for the<p>
is advised as18px
in the style guide. So in theclamp()
, you might consider changing the max font to this (1.125rem), which will also set the paragraph as taking up three lines instead of four, and is one step towards bringing your social media link section up from the bottom:--step-0: clamp(1rem,calc(0.92rem + 0.42vw),1.125rem);
The next step to bring this section upwards, might be to consider altering the
padding-block
in yourfooter, header, main {}
tomargin-block
. This will cause the margins to collapse instead of adding together:footer, header, main { margin-inline: auto; max-width: 1280px; margin-block: var(--space-s-l);
Then to increase the space between your
<header>
and<main>
, you might add some padding solely to either the bottom of your header, or top of your main. You could also apply theclamp()
method to this, if you wish, to make it scalable.I hope this helps! Great work! π©π»βπ»ππππ»
Marked as helpful1