Gaetan69

I had the same issue, there is a easy fix: in your wp dashboard go to genesis theme settings click on the default layout pictogram, it will now show a thin grey line around it, save settings

Everything works!

Hi there, solving the whitespace mystery.

Best practice is to first create a child theme, that is easy to do and it contains only modifications for the parent theme, so if your parent theme gets updated your modifications will not get lost. And if you somehow skrew up, you’l only break the child theme and not the whole theme. Instructions on how to make a child theme you can find here

And then replace or add to the content of your childtheme style.css :
(replacing if you have just copied your basic css file, adding if you already have a custom css file, as long as the file begins with something like:
@import url("../twentythirteen/style.css");

and then add:

/* Assistive text */
 .screen-reader-text {
 	clip: rect(1px, 1px, 1px, 1px);
+	overflow: hidden;
 	position: absolute !important;
+	height: 1px;
+	width: 1px;
 }

 .screen-reader-text:focus {
 	background-color: #f1f1f1;
 	border-radius: 3px;
 	box-shadow: 0 0 2px 2px rgba(0, 0, 0, 0.6);
 	clip: auto !important;
 	color: #21759b;
 	display: block;
 	font-size: 14px;
 	font-weight: bold;
 	height: auto;
 	line-height: normal;
 	padding: 15px 23px 14px;
 	position: absolute;
 	left: 5px;
 	top: 5px;
 	text-decoration: none;
 	width: auto;
 	z-index: 100000; /* Above WP toolbar */
 }

 /* Form fields, general styles first. */

and add a copy of the folder css in your child theme open it and edit the ie.css file: replace the content with:

}

 .ie7 .screen-reader-text {
-	clip: rect(1px 1px 1px 1px); /* IE7 */
+	clip: rect(1px 1px 1px 1px);
 }

 .ie7 .site-header {
 	position: relative;
 	z-index: 1;
 }

 .ie7 .main-navigation {
 	max-width: 930px;
 	padding-right: 150px;
 }

 .ie7 .nav-menu li a,
 .ie7 .nav-menu li {
 	display: block;
 	float: left;
 }

 .ie7 .nav-menu ul {
 	top: 40px;
 }

 .ie7 .nav-menu .sub-menu,

This should get you up and running
For some that use footer widgets with conflicting sizing and alignment also add to your style.css file:

.site-info,
.site-footer .widget-area {
 width: auto;
}

Remember all is done in your child theme folder, the basic theme files stay untouched!

Good luck.

I had the same
Totally solved this issue WOOHOO

Found the answer on github

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

Totally solved WOOHOO

Found the answer on github

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

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

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??

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.

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!

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.

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;
}

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 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!

yes: I am also using wp full calendar.
The site i am currently working on caters Salsa training and also parties. These are mostly evening/night events. when an event is from say: friday 20:00 until saturday 02:00 this event will render in the month view of wp full calendar as a two day event (a block that spans two cells of the table) I want to prevent that but i cant seem to hack that month-view table (with my lack of code skills) to make the event show up as a not-long event so i thought of a workaround: i create a event from 18:00 until 24:00, so it will render just in one cell of the month view and in the single event view it will still be announced the correct way (H+2) so from 20:00 untill 02:00
Does this make any sense?

Any support on this plugin?

In your main CSS (that of your theme, not of the plugin)

find something like:

.art-article table, table.art-article
{
border-collapse: collapse;
margin: 1px;
}

change margin to 0px