Right-side whitespace on mobile

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.

@shalysseromer, your site is running a theme called Omega, so some of the suggestions here may not work for you. You should try posting your question on the Omega support forum.

Hi, I saw you were so helpful – could you please help me with the similar problem?
I have some free space on the right side of my site: https://www.letitslow.com
When viewed on mobile devices, it is even worse – the site is really narrow and difficult to read.
Does anyone know how to fix it? I would be really thankful (even more for some simple advice – I am total beginner ?? ).
Thank you very much.

Your Ultimate Social Media Plus widget (the one labeled Kontakt) is keeping the page width too wide for a mobile device (and for the desktop). For some reason it’s set to 560px wide. Try removing that widget to see if it fixes the problem.

Thank you very very much. It works! May I have one more question? Is it possible to make the widget smaller somehow or it is better to remove it and get some new one?
Really thanks for quick help.

If you put the widget back in, I can see if there’s some CSS that you can add to remove the fixed width.

Done.

If your theme has a custom CSS option (and I don’t think Amadeus does), then add the following rule using that option. Otherwise, install and use a CSS plugin like Custom CSS Manager.

.sfsi_plus_wDiv {
   width: auto !important;
}

Ok, I will try that. Thank you for your help, I really appreciate it.