Skip to content
OverviewSolutions
14
Comments
2

NixyMc

@Nix7amcmN.Ireland190 points

👩🏻‍💻Always learning something🌱

I’m currently learning...

👨🏻‍💻 HTML / CSS / JS 🚀 || Current focus: 👉🏻 Vanilla JS 👉🏻 Backend, API integration etc 👉🏻 MERN stack (MongoDB, ExpressJS, React, NodeJS) 👉🏻 Utilising ChatGPT to enhance productivity and learning

Latest solutions

View more solutions

Latest comments

  • NixyMc•190
    @Nix7amcm

    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
  • NixyMc•190
    @Nix7amcm

    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