Right-side whitespace on mobile

Usually, when a site has extra space off to the right, it’s because there’s an element that sticks out too far and keeps the width wider than a cell phone screen. However, the element which is responsible is going to be different from site to site, so the CSS which works for one site most likely isn’t going to work for another site.

The problem in your case is that you have a text widget in your footer for Twitter, and the Twitter Footer has an inline style setting the width to 350px, which is wider than the width of many cell phones. So here is what I would do:

Go into the text widget which contains the Twitter footer. The first line should look something like this:

<div class="twitterfooter" style="width:350px;">

Edit that line and remove the style=”width:350px;” so it now looks like this:

<div class="twitterfooter">

Then add these CSS rules to your child theme’s style.css file:

.twitterfooter {
   width: 350px;
}
@media (max-width: 410px) {
   .twitterfooter {
      width: auto;
   }
}

The first rule sets the width to 350px in the normal case. However, when the screen width goes under 410px, the second rule will kick in, changing the width to auto, meaning the element will fit into whatever space is available.

Wow, yep, that’s it. Rookie mistake. I really appreciate you taking the time to look at this and helping me learn from my mistake.

I got a similar issue (2013childtheme) with the white space at the right side of the screen on mobile view.

No “addons” from me that sticks out too far and keeps the width wider than a cell phone screen

But it appears when the amount of posts exceed the max amount posts per page, so i figured that the previous post/next post navigational links below the postings cause this.

Can anyone help me out? i am kinda newbie to code, experimented a bit but to no result yet.
Thnx!

@gaetan69, it would help if you could post a link to your site. Impossible to figure out otherwise.

mercurieux.realiser.nl

If you select blog page you get the whitespace on an iphone 5
Thx for looking into it!

While i am looking at it… Id like to have paging for the blog page(s)
But at single post level i’d rather not have this post navigation, how can i achieve this?

there was a typo in the url! just edited this post, the url should work

I guess i have to alter something in this part of the css…But what?

.paging-navigation {
	background-color: #e8e5ce;
	padding: 40px 0;
}

.paging-navigation .nav-links {
	margin: 0 auto;
	max-width: 604px;
	width: 100%;
}

.sidebar .paging-navigation .nav-links {
	max-width: 1040px;
	padding: 0 376px 0 60px;
}

.paging-navigation .nav-next {
	padding: 13px 0;
}

.paging-navigation a {
	font-size: 22px;
	font-style: italic;
	font-weight: 300;
}

.paging-navigation .meta-nav {
	background-color: #e63f2a;
	border-radius: 50%;
	color: #fff;
	display: inline-block;
	font-size: 26px;
	padding: 3px 0 8px;
	text-align: center;
	width: 50px;
}

.paging-navigation .nav-previous .meta-nav {
	margin-right: 10px;
	padding: 17px 0 23px;
	width: 80px;
}

.paging-navigation .nav-next .meta-nav {
	margin-left: 10px;
}

.paging-navigation a:hover .meta-nav {
	background-color: #ea9629;
	text-decoration: none;
}

I just looked at the blog page on my iPhone 5 under both Safari and Chrome and I didn’t see any extra space to the right. Did you solve your problem?

Thanks for looking into it, i didn’t really solve it yet, but i am getting closer, there are two bits of code that seem to cause the whitespace:

.paging-navigation {
	background-color: #e8e5ce;
	padding: 40px 0;
	display: none;
	}

and:

.post-navigation {
	background-color: #fff;
	color: #ca3c08;
	font-size: 20px;
	font-style: italic;
	font-weight: 300;
	padding: 20px 0;
	display: none;
}

I have added the display: none and put these two snippets in the media query part of the css in the part after:

/* Mobile devices */
@media (max-width: 359px) {

Setting the display to none does solve the whitespace issue but also: no more post and page navigation anymore on mobile.

I’ve tried to work with a max width setting, if i’d set it to 200 or 100px or so (which is absolutely smaller dan the screen) i see: that the block renders smaller than the screen size, but still there is the whitespace!, also width: auto; didnt do the trick. Could it be somekind of alignment that i am overlooking??

So i commented this out in the css for you to see: the whitespace is back! Somehow the .paging and the .post navigation is causing this, i don’t understand quit why, and how to get this fixed. setting display to none, is workable for now but not really a solution.

Thanks for any advice.

Inspecting the elements with the browser i found something interesting: in functions.php there is something called:
<h1 class="screen-reader-text">Berichtennavigatie</h1>

i found screen-reader-text in the css, set its width to 100%

In the inspector this item seems to behave, but still something makes the browser think the site is somehow wider: still whitespace on the right…

Frustrating!

It gets worse.. ??

Look at the horizontal scrollbar, a big large whitespace to the right of the theme!

Help!

Now this is on a custom childtheme but even on a virgin 2013 version i get this mess!
I get this with the latest Chrome browser (40.0.2214.115)
And Safari 5.1.10 (6534.59.10)
Firefox doesnt render the extra whitespace.

Update

The whitespace on the desktop (blogpage) is fixed just by removing some posts, my first guess was that they contain some imported text editor markup that causes the problem, i have just found out that the issue occurs when i use the read more tag.

So using the read more tag in the editor causes a big white space at the right side of the site on the blog page.

White space on mobile (iphone) remains an issue
the .paging-navigation and the .post-navigation are the “problem” here.

anyone an idea how to size/position them the right way??

The read more tag causing the whitespace:
<span class="screen-reader-text">alweer een post</span>

Totally solved WOOHOO

Found the answer on github

update CSS rules for .screen-reader-text to be consistent with current accessibility guidelines.

Great find. I was examining at your site for quite a while & couldn’t figure out what was wrong.

I’m experiencing the same problem – I am a super beginner coder (wouldn’t even call myself that). My site on Safari on my laptop is the way I would like it, but on my mobile there is unwanted white space on the side.

The site is https://www.eyeforelan.com if anyone would be able to help?

Thanks ??