Skip to content
Submitted about 2 years ago

Single price component using flex

Dihmoss•40
@MosesKipyegon
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

My mobile view broke when I worked on the desktop view despite having a media query.

How do you make a button change size in the different viewports it may encounter?

I'm not sure if I used flex correctly or was I supposed to use grid as the title of the challenge had stated?

Community feedback

  • Sandesh G.C.•60
    @gcsandeshPosted about 2 years ago

    Since you've used "em"s to set the dimension of buttons, you can increase/decrease font size of the button according to the viewport or you can use media queries to modify its dimensions. Also, I would recommend setting font size of the button using "rem" instead of "em", because "em" will set the font size of the element with respect to the font of its parent element. If you set the proper font size of the button, then you could adjust its dimensions using "em" for padding or width, and modify them by changing the font size or using media queries.

    Marked as helpful
    1
    Dihmoss•40
    @MosesKipyegonPosted about 2 years ago

    @SandeshGC many thanks I will consider this and incorporate and see how it comes out.

    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