Skip to content
Submitted almost 5 years ago

Four Card Feature Section using Atom

Modu9173•40
@Modu9173
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Four card feature section
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I had a hard time making the "Reliable efficient delivery" thin, i tried changing the font-weight but it still looked the same. I did some research but still couldn't find any answer. I would love your answer on this problem.

Also I don't know why there's a huge space below, around the footer section. I tried fixing it but can't find the right solution. Would also love your help on this problem.

And it seems like the pictures go out of the box once the window is minimized, how can I fix that?

I'm a total newbie at this so I have a lot to learn

Community feedback

  • Cassidy•555
    @DarknessflowersPosted almost 5 years ago

    Hi there. From what I can see it looks like you're only loading in one font-weight of the font. So even though you tell the CSS that you want a different font weight it isn't 'seeing' them. When you go to Google fonts and grab the font before getting the embed code go to the customise tab and select the font weights you require.

    You're positioning everything relatively. If you took off the positioning you would see them all stacked on top of each other. When you position it relatively it still takes up its old space which is why the footer is so far down. Hopefully this gives you something to go off to try fix it. I haven't done this layout yet myself so I'm not sure how I would have done it, but I will probably attempt it with flexbox.

    Your relative positioning is also why the boxes disappear on mobile. Because you have it set to be left by X amount of pixels once the screen is small that amount of pixels causes it to be hidden off screen. I recommend looking into media queries.

    Great job, though! Good luck with your learning.

    Marked as helpful
    2
    Modu9173•40
    @Modu9173Posted over 3 years ago

    @Darknessflowers Thank you so much for the recommendation! I used CSS Grid, Flexbox and media query. It worked!

    0

Please log in to post a comment

Log in with GitHub

Join 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