Re: How to remove white borders on mobile

julianojg · ‎07-31-2023

While viewing the page on mobile ( this instance being the iPhone 14 pro max) I notice that there are white borders on the side of the page while both being in both vertical and horizontal mode:

Would it be possible to remove / change the colour of the borders?

julianojg · ‎08-01-2023

{% style %}
html, body {
  background:black;
    }
{% endstyle %}

View solution in original post

juanvisbal · ‎07-31-2023

Hi there,

Could you provide a preview link so I can test on device? Thanks.

Pasilobus, Inc – Shopify Experts: www.pasilobus.com

Check out Pasilobus apps in Shopify App Store: apps.shopify.com/partners/pasilobus

julianojg · ‎07-31-2023

https://wtcif0t2sf49f0j0-79570010410.shopifypreview.com

juanvisbal · ‎07-31-2023

We could not see any white spaces on portrait, are these the ones you are referring to on landscape?

If so, this is the safe area to avoid putting content under the iPhone's notch or Dynamic Display. You could change it to another by setting the background color for the <body> and/or <html> elements, like this:

body {
  background-color: #000; /* black */
}

This could be done in the Theme Editor, either with your theme settings or under Custom CSS.

Pasilobus, Inc – Shopify Experts: www.pasilobus.com

Check out Pasilobus apps in Shopify App Store: apps.shopify.com/partners/pasilobus

julianojg · ‎08-01-2023

this did not work

julianojg · ‎08-01-2023

{% style %}
html, body {
  background:black;
    }
{% endstyle %}

Re: How to remove white borders on mobile

How can I eliminate white borders on mobile view?