All comments

• 

  Ola135• 60

  @Ola135

  Submitted over 1 year ago

  All suggestions and hints are welcome. Thank you. :)

  

  3-column preview card component

  3

  110

  

  NixyMc• 190

  @Nix7amcm

  Posted 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 around 500px. You could play around with this to see what you like best!

  I hope this helps! Great work! 🚀😃👍🏻

  Marked as helpful

  1

  This comment has received 1 replyShow
• 

  Josh Javier• 790

  @joshjavier

  Submitted 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! :)

  

  Huddle landing page feat. 11ty, CUBE CSS, PostCSS, and Utopia

  1

  90

  

  NixyMc• 190

  @Nix7amcm

  Posted over 1 year ago

  Hey @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 as 18px in the style guide. So in the clamp(), 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 your footer, header, main {} to margin-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 the clamp() method to this, if you wish, to make it scalable.

  I hope this helps! Great work! 👩🏻‍💻🚀😃👍🏻

  Marked as helpful

  1