[SOLVED] Single Posts "squished" to the left in Mobile
 

I just switched to Montezuma for mobile only (I'm still very attached to my Atahualpa, but needed a dynamic theme for mobile). The category lists, etc. are working beautifully - it's just the individual posts where it's a problem (I'm also having an issue with the home page, but I suspect that's a caching issue and I'm not worrying about it right now). I've played around with the single.php template enough to narrow the problem down to the php content, but I'm not sure where to go from there. My Content CSS is unmodified from the default, except from one small change in color.

site is: http://savour-fare.com
Screenshot (from my iphone)
https://farm4.staticflickr.com/3852/...9765461b7e.jpg

I'm far from an expert in CSS, but I have so far managed to jury-rig my site so it works well enough.

Do a search for iPod or iPad. There is a css setting that needs to be changed. If I was home I'd look for it but I'm out right now

Thanks.
I found this post: http://forum.bytesforall.com/showthread.php?t=21130
and that CSS fix (changing the opacity) didn't work.

Also looked at this one: http://forum.bytesforall.com/showthr...ghlight=iphone

It seems like it's a relatively common problem but everyone's presentation (and fix) is different.

Please let me know if I'm missing something - I'm new to the forum, but I did do some poking around before posting.

I've looked at both of these threads - are those what you mean? Problem seems to have a slightly different presentation and is still happening.

http://forum.bytesforall.com/showthr...highlight=ipod
http://forum.bytesforall.com/showthread.php?t=20471

1) what version of montezuma?
2) On my iPod your site still shows atahualpa?

the issue I was thinking about should have been fixed long ago (http://forum.bytesforall.com/showthread.php?t=19542) and without seeing the site in montezuma, and seeint the issue I don't know what might be happening.

It's running 1.2.2 and I've changed the settings so the ipad version will be on Montezuma as well.

In the Montezuma version it looks fine - after the header area you have the center area and widget area in the same row with the center area assigned 8 colums and the widget area four columns

What is the problem?

On my iphone, the home page is full width, but the single posts shrinks the header and the content to about 40% of the screen width.

Screenshots:
Page 69:
https://farm3.staticflickr.com/2929/...15fa689084.jpg

Post:
https://farm3.staticflickr.com/2925/...5a18b9a1d4.jpg

On my phone, my widget area isn't showing up in either view.

Not sure why your widgets aren't showing up. As Juggledad mentioned, the widget area is there, but there are no widgets in it. I take it you added widgets? You will have to add the widgets while Montezuma is active, I don't think the widgets you added through Atahualpa are going to show up.

As far as the width of the single posts go, what is causing the problem is a plugin that's being used to display a Google AdSense ad at the bottom of the post (right after the social media buttons). That's why it's not affecting the home page or any category/archive page, because it's configured to only display on single posts. The ad has a fixed width of 728px, so it's extending the width of page. The ad itself is not responsive, so it doesn't shrink in proportion to the screen width. If you disable the plugin, you will see your mobile pages shrink correctly in width. Or, you can try adding this rule to the end of your various.css file:
This will hide any part of the ad that doesn't fit in the page, if that is acceptable to you. Otherwise, you can use a media query to hide the ad altogether on mobile screen sizes.

Thank you! That helped enormously - now it's at about 70% of the screen instead of 40%. would love to get it to full width, but 70% I can live in - I'm wondering if it's one of my plugins, or the fact that I'm hosting images on Flickr, so they're not getting resized the same way.

New screenshot here:
https://farm6.staticflickr.com/5151/...476c817845.jpg

The first Facebook Like button has an area with a fixed width of 450px. Unfortunately it doesn't have a class or ID associated with it, but it's the only iframe that's a direct child of the post-bodycopy div, so this rule should make it fit correctly (unfortunately the width is set inline, so you have to use the !important clause to override it):
Then there's a known "problem" with the width of the breadcrumbs bar on a mobile device, where the padding to the left extends the bar a bit to the right. You can fix it one of two ways, either setting the width to 90% or eliminating the padding:
or
Finally, you will probably want to eliminate the arrows to the left of the social media icons. Sharedaddy uses list items to display it's buttons, and Montezuma automatically adds the arrow icons to the left of list items. This will hide those arrows:

Thanks - I switched to another FB plugin and now it looks great. Problem solved!