HTML, CSS, CSS Flex

Community feedback

• 

  Lucas 👾•104,340

  @correlucasPosted over 2 years ago

  Hello Shamir,

  Congratulations for your solution!

  Answering your question:

  Basically what isn't allowing your container to align center is the property height inside the div called .bg__image. So just delete this property from .bg__image class and the card will be aligned center. Consider that for the card you don't need to set a value for the heightsince the card height will come from the padding and margin you'll add to the this container element.

  Note that you did a good work building this component, but there are some elements inserted in the wrong places and some stuff to fix in order to improve the responsivity.

  Here's what you can do to fix some issues and improve it a bit:

  1.The pattern background is inserted in the card inside the div called .bg__image you should add the background-image with the pattern inside the body, see the code below:

  body { font-family: "Red Hat Display", sans-serif; background-color: var(--pale-blue); text-align: center; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; background-image: url(images/pattern-background-desktop.svg); background-position: top; background-repeat: no-repeat; }

  2.Card reponsivity, your card isn't flexible because you've set a fixed value for the width so the card is a block, instead of width use max-width to allow the card to contract in smaller screens.

  3.The card shadow is too strong, try a box-shadow with more blur and less opacity, for example: box-shadow: 0px 0px 15px 0px rgb(0 0 0 / 30%);

  I did all this changes in your code using devtools and now is working, try that and say me if fixes your solution.

  Hope it works for you and feel free to write me again if you need to. Happy coding.

  0