Trying to remove awkward padding on mobile


#1

Hi,

Here’s my site…
http://newsite.communitywestchurch.org

When displayed in mobile browsers there is a small sliver on the right side of the page that appears. Since I added contact info in the footer, I know the extension of the email address exacerbates this. However, this sliver was there before I added that info, and you can still see it if you go to landscape orientation. I’d like to eliminate the white space even if that means cutting off the email address. Preserving it isn’t as important to me (though if there is a solution to that as well I would appreciate it).

I’ve been testing this on my iPhone 6. I also tested on an iPad mini…The sliver appears in portrait orientation but not in landscape on the iPad (and the email address doesn’t extend beyond the width of the page here).

Any ideas?


#2

It might be worth noting that the site maintains responsiveness and the sliver does not appear when I manually adjust the width of my desktop web browser.


#3

Scratch that, it still appears when I manually adjust the width of my browser.


#4

SOLVED - I still have no idea why there was an awkward overflow. It only appeared at screen sizes larger than 1200 and less than 700. I could not identify which element was causing it…multiple attempts at editing widths, overflow values, and even the Bootstrap css yielded no results. I eventually settled on adding this custom CSS:

body {
overflow-x: hidden;
}

which solved my problem. Hope this is helpful for anyone who may have a similar issue.