Mobile Sizing Issue

[[email protected]]

Hello. My website at http://www.fumcaustin.org appears to have a padding issue on mobile only on the right hand side. I haven't modified the mobile CSS since launch of this website so don't know if an update conflicted with this or if manual adjustments are needed.

Please view on iphone and let me know if there is an easy fix to have my iphone 6 or 4 view the mobile site without the padding on the right hand side.

Thank you.

Mary

http://fumcaustin.org/

[Doug Edgington]

I would say it is the slider's navigation arrows creating the gap in responsive mode. You could look to see if there is a setting to disable the arrows in responsive mode.

---

Doug Edgington
http://www.dougedgington.com

[[email protected]]

Hi Doug,

I tried your advice and removed the arrows and it didn't change the mobile padding issue. I also logged a trouble ticket with Soliloquy and they were not able to replicate my issue. Then, I logged a request with WordPress.org and they suggested I go back to StudioPress.

So, I'm back and am hoping you can help me solve the padding issue. Soliloquy thought it might be a plugin compatibility issue, but I can't find the root problem.

When I go to http://www.fumcaustin.org on my iphone 6, there is about an half inch of padding on the right hand side. When I resize to mobile on my desktop browser, I don't see this padding so not sure if this is an iphone specific issue with the template or plugin.

I appreciate any direction you can provide since I am at a loss. Specs below on browser used.

Thanks,
Mary

Operating System iPhone iOS 9.2.1
Screen Resolution 414 x 736
Web Browser Safari 9.0
Browser Size 980 x 1487
IP Address 166.170.5.110
Color Depth 32
Javascript Yes
Flash Version Not Installed
Cookies Yes
User Agent
Mozilla/5.0 (iPhone; CPU iPhone OS
9_2_1 like Mac OS X)
AppleWebKit/601.1.46 (KHTML, like
Gecko) Version/9.0 Mobile/13D15
Safari/601.1

[[email protected]]

I was able to fix my mobile padding issue using this code. This topic can be closed.

html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
}

[Doug Edgington]

Glad you got it working. Since you applied styling fix at the body level, I would just make sure it did not affect anything else around the site.

---

Doug Edgington
http://www.dougedgington.com

[Author]

Posts