Submitted 4 months ago

Four Card Feature Section (Resaponsive)

surpoxia• 120

@surpoxia

Preview site(opens in new window)View code(opens in new window)

This is a solution for...

Four card feature section

HTML
CSS

1newbie

View challenge

Design comparison

SolutionDesign

Solution retrospective

What are you most proud of, and what would you do differently next time?

I think when it comes to the MockUp, I am pretty close.

What challenges did you encounter, and how did you overcome them?

My biggest problem was the responsiveness. My site now works as was demanded, but I wish it would behave more fluidly and organically when you resize it. I know it is possible even without a Media Query and by just using the grid layout alone, to make the grid just change its layout as you resize the page.

Right now my CSS is a bit of a mess, because of all the adjustments I needed to apply to the Media Query for the mobile version of the page. And when you resize it, it just snaps into into its nerw layout. I wish it would do it more smoothly.

What specific areas of your project would you like help with?

Maybe someone could explain to mehow to make the grid grow and shrink and change it's layout when resizing the page more smoothly, when you start out with a complicated layout like in this challenge.

Community feedback

JuvoGenesis👾• 2,010

@AkoToSiJeromeEh

Posted 4 months ago

Hey ! Great Work out there i just notice that the four card component is does not vertically align on the middle ( you can notice it by zooming out the web page ) you are correct through the usage of flex with the properties of justify in order to center the component but the reason why its not vertically align is because there are no height it is very important whether you want to center something. by adding this on the body you can achieve to vertically align the component . that's all happy coding !!

body {
  display: flex; // add this
  flex-direction: column;
  justify-content: center; // add this
  margin: 0 auto; //remove this since you are using flex properties
  background-color: var(--Very_Light_Gray);
  align-items: center; // add this
  min-height: 100vh;// add this
}

Marked as helpful

Please log in to post a comment

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