Iphone margin/width issue with wordpress default themes

B

brometheus55

Banned
Jan 11, 2012
84
1
0
Hello

I am currently having issues with displaying theme Twenty Thirteen on an iphone/mobile device when the page has a widget/application embedded on it.

I have put together a test page Test Site to demonstrate this.

Pictures of the problem are posted here: Pictures of Problem | Test Site

There is a post which features a contest widget: Blog Post | Test Site

and another page that has a would be coupon widget on it: Sample Page | Test Site

Both produce the same problem viewed on iOS, although it is more serious, the wider the widget/app.


I am having this problem on a couple website that both are running twenty twelve and twenty thirteen. The same problem exists either way.


I have tried searching for a fix and the best I could find allowed the page to display correctly, but had the apps running off the side of the page which is unnacceptable, even if scrolling is enabled. I need it to basically look the way it does when viewed on iOS currently except with the rest of the page/content stretching out the full width. The site needs to remain full responsive otherwise.


Hope this makes sense. Any help is highly appreciated.
 


The iframe in which each the widget's contents are loaded are both larger than the width of the iPhone's screen

The WordPress theme is responsive, so its width changes appropriately for the iPhone, but the iframes don't... which screws everything up

You need a non-responsive theme or responsive-friendly widgets
 
iamjon said:
The iframe in which each the widget's contents are loaded are both larger than the width of the iPhone's screen

The WordPress theme is responsive, so its width changes appropriately for the iPhone, but the iframes don't... which screws everything up

You need a non-responsive theme or responsive-friendly widgets
Click to expand...


Thank you very much for the response. I think I just found my answer in this fix. Sets a minimum width per page class.

.page-id-xxx {min-width:960px}
.home {min-width:425px}


Seems to be working fine. Only problem I am having is trying to figure out how to affect the .home class but not .pages class as they share the same body classes (speaking of paginated pages page 1, page 2 etc)
 
You must log in or register to reply here.
Top Bottom
Back