Skip to content
Submitted over 3 years ago

Single Price Component with Flexbox

Yunus Alif•150
@frontendnus
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Single price grid component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

I have a problem with cta. How do I make the width of the button always 100% in the box - padding instead of me having to always set the width in every media query? Please, your feedback is helpful for me.

Community feedback

  • Asif M•200
    @asifm37Posted over 3 years ago

    If you have a div container as the parent element for your button, you can use 100% The button will always be the full width of the container.

    0
  • Hafizan Adli•1,190
    @hafizanadliPosted over 3 years ago

    Hey, you can just add width:100% to the btn class. Instead of set the padding.

    0
    Yunus Alif•150
    @frontendnusPosted over 3 years ago

    @hafizanadli I have tried it and the text must go down

    0
    Hafizan Adli•1,190
    @hafizanadliPosted over 3 years ago

    @frontendnus don't add left and right padding in btn class. Only set top and bottom padding

    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