Return to previous page

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

This topic has 2 replies, 2 voices, and was last updated 7 years, 5 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

    #165840 Copied
    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.

    #165843 Copied
  • Viewing 2 results - 1 through 2 (of 2 total)

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

8theme customization service

Useful links WooCommerce & WordPress

Unleash your online potential

Explore our best WordPress WooCommerce Themes collection

lazy-placeholder
Yoga Accessories – WordPress WooCommerce Theme
lazy-placeholder
Hemp & CDB – WordPress WooCommerce Theme
lazy-placeholder
Pet Shop – WordPress WooCommerce Theme
lazy-placeholder
Kidsstore – WooCommerce Theme
lazy-placeholder
Kids Toys Store – WordPress WooCommerce Theme
lazy-placeholder
Cleaning – WordPress WooCommerce Theme
lazy-placeholder
Medical – WordPress WooCommerce Theme
lazy-placeholder
Animals Store – WordPress WooCommerce Theme
lazy-placeholder
Grocery Mega Market – WordPress WooCommerce Theme
lazy-placeholder
Minimal Electronics – WordPress WooCommerce Theme

See All Templates

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