When padding and margin become too much on less wide mobile displays

This topic has 2 replies, 2 voices, and was last updated 6 years, 9 months ago ago by Rose Tyler

  • Avatar: emeliech
    emeliech
    Participant
    June 15, 2017 at 13:34

    Hello,

    I understand that this might not be on your table. But maybe you can help me with some best practices.

    On desktop I decide that I want 30px top-padding on a row. It looks good.

    But when I view on mobile (iphone 5 or 6), the 30px become way too much since the displays are so thin (less wide).

    An example:
    1. see main page http://www.ringsofsweden.com on desktop > notice the gap between slider and first headline.

    2. Now go to the same page on a mobile with thin display, and notice that the gap feels way bigger in comparison to other elements on the page, creating a bigger % of white space.

    Do I need to change it particularly for every single row where I use this on the mobile css or is there another way around this that is more intuitive.

    What are the recommendations when it comes to this sort of things?

    Thanks!

    Emelie

    1 Answer
    Avatar: Rose Tyler
    Rose Tyler
    Support staff
    June 15, 2017 at 14:30

    Hello,

    Try to use vw (1vw = 1/100 of the current viewport width, i.e. 1% of the width) or vh (15vh = 15/100 of the viewport’s current height or 15% of the height) instead px to set margin and padding.

    Regards,
    Rose Tyler.

  • Viewing 2 results - 1 through 2 (of 2 total)

You must be logged in to reply to this topic.Log in/Sign up

We're using our own and third-party cookies to improve your experience and our website. Keep on browsing to accept our cookie policy.