Skip to content
Submitted almost 3 years ago

Stats preview card component

Igor Ostojic•300
@igor-ostojic
Preview site (opens in new tab)View code (opens in new tab)
This is a solution for...Stats preview card component
  • HTML
  • CSS
1newbie

Design comparison

SolutionDesign

Solution retrospective

Any better way to do the responsiveness besides a bunch of media queries ?

Thanks in advance !

Community feedback

  • Neil Khatri•620
    @nkhatri7Posted almost 3 years ago

    Hey Igor,

    First of all, the design and code look great! So one way of adding more responsiveness is using vw and vh. These are relative units that respond to the dimensions of the viewport, so vw is 1% of the viewport width and vh is 1% of the viewport height. Now I wouldn't recommend using these relative units on their own, it's probably better to use them along with a base size in a calc() function (e.g. calc(10rem + 10vw)).

    P.S. I noticed in your HTML file you used the <head> tag inside your main, I'm assuming you wanted to use <header> instead?

    Hope this helps :)

    Marked as helpful
    1
    Igor Ostojic•300
    @igor-ostojicPosted almost 3 years ago

    @nkhatri7 Thank you so much for the advice Neil !

    The biggest issue I have is making the design fit on all the available devices that are shown in the Chrome Dev tools.

    For example it looks great on iPhone X, but too cramped on iPhone 6/7/8 Plus or Galaxy Fold.

    So i am trying to learn the best practices for responsive design with writing as few media queries as possible.If you have any good tutorials to link regarding that it would be very helpful !

    And yes you are right, i meant to use <header> not <head>

    0
    Neil Khatri•620
    @nkhatri7Posted almost 3 years ago

    @igor-ostojic Yeah I think when working with mobile views, using vw is really useful, so the sizing of components/text would increase and decrease with the width of the mobile, and therefore making it less cramped on the smaller mobile devices.

    Unfortunately I don't have any good tutorials to link at the moment but hopefully this helps a bit!

    Marked as helpful
    1
  • Zaklina Radivojevic•560
    @zaklinaradivojevicPosted almost 3 years ago

    Responsive text : https://bits.theorem.co/css-pro-tips-responsive-font-sizes-and-when-to-use-which-units/

    Skoro sam i sama googlala o tome...

    pozdrav

    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