Skip to content
Submitted over 2 years ago

Responsive page using position to absolute

Ogiji Max•140
@MaxiTeddy
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Product preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Please I am having a problem with the original price, I can't center it. And any correction from you guys will be much appreciated, Thanks.

Community feedback

  • Kevin Pernia•200
    @kevin3080Posted over 2 years ago

    my solution would be to treat the entire pricing section as a "display:flex" so they align next to each other(in your div), then I can use "gap" a 16 or 6px to separate them, and finally "align-items: center". (for your <p> tag to inherit these properties, you need to disable your display: in-line and the margins you placed. This way you make sure that the two price elements are always centered

    Marked as helpful
    0
    Ogiji Max•140
    @MaxiTeddyPosted over 2 years ago

    @kevin3080 Thanks man, I really appreciate, I will apply it as so as possible

    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