I am new to the forums, just signed up. I am hoping you might be able to help!
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 http://makemoneeonline.com to demonstrate this. (by the way this isnt spam or anything, its just an extra domain I had lying around)
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 unacceptable, 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.
Unfortunately, plugins like these from Facebook and other sites tend to be frustratingly non-responsive, fixed-width PITAs, and there’s only so much you can do about it. Some developers have started to come out with more responsive options, so that’s the first thing I’d be looking into.
Thank for your response. I would like to note that the apps used, actually appear at the correct size when viewed on a iphone, but the rest of the theme is squished horizontally leaving the giant margins. If you view the page on a phone (iphone at least) you will see what I am talking about. I see no reason these things cannot fit on screen correctly as i’ve witnessed them display correctly on other sites running wordpress.
With responsive design, you need to go through your style sheet(s) with a fine tooth comb and make sure there are not styles in place that will kill your layout on a small screen, such as this:
If you have a fixed width element dropped inside a fluid layout then the layout continues to squash while the fixed width element does not. This is why the content on the mobile moves smaller while the actual page is scaled to fit the fixed width item.This leaves fluid content appear squashed to the left on mobile.
You would either need to put the widgets inside a container that is a percentage width (100%usually) and then hide the overflow or set scrollbars to appear. Or set the min-width on the page to be the same as the width of the widest fixed width element on the page.
e.g.
For your coupon page that would be 960px;
body{min-width:960px}
Add a special class to the body to affect only that one page.
You can’t have it both ways and if you want fluid then you need fluid elements or scale fixed width elements smaller. If you insert a fixed width element in a fluid layout then the layout will break at the point that the fixed width element is the wider than the screen. As mentioned above you either hide the overflow, scroll the overflow or stop the page getting smaller with min-width. (Or create a widget that squashes nicely :))
Yes! This seems to be working fantastic. I added this code to my child theme css, and it fixes the issues on both pages! This seems to be exactly what I am looking for. Now all I need to do is figure out how to do what you are saying and create a separate class for individual pages. Excuse me for for not knowing much CSS. If you could hit could help me out with the correct code to do that that would be helpful. Do I need to add code to the body tag of my header.php file and then in the CSS? I am currently searching for how to do this, but coming up a little short. Will update if I figure it out. Thank you!!!
For example, my homepage and the paginated pages page 2, page 3 etc both use the class “home” in the body. The paginated pages also include the class “paged” So how can i tell it affect “home” but not if it is also “paged”…so it will only affect just the main page of my blog.
Yes that’s fine as you just over-ride the value with another class.
Also still wondering about the post above for excluding a page class.
I gave ytou the answer above and its just the same as you have already done in that you just reset the value using the paged class. If you wanted to be clever you could use the :not selector but it gets complicated and support is only IE9+.
e.g.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body.home:not(.paged) { background:red }
</style>
</head>
<body class="home paged test">
<p>I'm only red if paged is not present in the body tag.</p>
</body>
</html>
Makes perfect sense and works!! That seems to be the last of my problems on this issue. Again I want to say thank you so much for your help and time, can’t tell you how much I appreciate it.
