Skip to content
Submitted over 1 year ago

landing page with flexbox and abs. positioning

colognia•70
@colognia
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Order summary component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

  • do you size the containerbox absolute in px oder relative in % ? If you want it to grow/shrink relatively on bigger monitors would you use aspect-radio: x/y ? Here width would be 30vw and height around 3x the width.

  • it it ok to put the image tag for the backgroundimage as first tag in the body? Is there a better place? If you set it for the body as backgrnd-image in css, you can not position it later on top.

  • inside the container, are you using grid/flex for positioning the items? As the dimensions are all different, I gave it up and worked with padding/margin.

  • Which font-size shall p-Elements have? Can not be weight 500 as in description (smallest given size), way too big, so I used 0.8em.

Thank you!

Community feedback

  • Tushar Biswas•4,080
    @itushPosted over 1 year ago

    Congratulations on completing the challenge! 🎉

    • I always try to use relative CSS units because they scale better between different rendering mediums. And use absolute CSS units unless it's absolutely necessary.

    • I prefer to use CSS background shorthand to link an image. This way I can control it efficiently.

    /*background: [background-color] [background-image] [background-repeat] [background-attachment] [background-position] / [background-size];*/

body {
background: url(./images/pattern-background-desktop.svg) center/cover no-repeat;
}
    • You may checkout 12 important CSS topics where I discuss about css position, z-index, box-model, flexbox, grid, Media Queries, Mobile-First Workflow etc. in a simple way.

    I hope this helps. And I look forward to see cool projects from you in the future🚀

    Keep at it...💻 Happy hacking!

    Marked as helpful
    0
    colognia•70
    @cologniaPosted over 1 year ago

    @itush Oh whow, thats how u can fit this stubborn back-image. =] Those parameters are new to me, thank you so much! Just knew how to size images in img-tags correctly with object-fit, but does not work for background. And thank you as well for this article, lots of new valuable info. Lets work on the next challenge. ;) c u !

    1

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