Spacing appear to right of site container

[Tmgale]

Hi All!

Glad to be using the Gensis framework has been great so far!

However, I have encountered a strange spacing issue that I am unsure of how to resolve and I am wondering if anyone could kindly shed some light on the issue.

I am using the Gensis sample child theme, the spacing issue occurs to the right of the header and footer at 1310px and below. When the screen is reduced below this demisinsion extra space is created to the left of the site container ( a scroll bar appears at the bottom of the page and space is seen to right of the header,footer and body ).

The issue occured when I changed this specific code in my media quiers section ( I done it for all specified deminsion), I changed the code from:

.site-inner,
.wrap {
max-width: 800px;
}

to,

.site-inner,
.wrap {
max-width: 100%;
}

As mentioned I done this at all media quiery sizes.

This causes the white space? Any idea how to resolve this whilst keeping a 100% width?

Thanks for all the support!!

http://www.allcleartravel.com/au/

[James]

hi there

do you have a link to this site so i can take a look for you.

[Tmgale]

Hi jamie,

Yes the URL is http://www.allcleartravel.com/au/

Thanks for the response! 🙂

[James]

oh, i did check that site but could not see any issues

all seems to be fine on mobiles, the only issue i could see was the mobile nav was not working for the dropdowns.

[Tmgale]

Yeah the mobile drop down menu is a issue that I am aware of at the moment but I cant work out how to fix it.

In regards to the orignal issue, if you view tablet or mobile and you scroll to the right of the page you will see the 'blank' space. Its only visable if you physically scroll to see it.

Thanks jamie!

*edit*

View in http://responsivetest.net/#u=http://www.allcleartravel.com/au/|1090.5|809.5|1

for example

[James]

ahh

down in the footer, right ? that space.

[Tmgale]

Yeah, its to the right of the whole of the page, the footer and header.

It only happens when you change

@media only screen and (max-width: 960px) {
.site-inner,
.wrap {
max-width: 800px; to 100%
}

-Happens on any max-width.

Annoying becuase I need 100% width for content to display correctly, but it causes the white space.

[James]

ok

that one was tricky

in your code below the left: 52px is causing the issue

.header-image .site-title > a {
  background: rgba(0, 0, 0, 0) url("http://www.allcleartravel.com/au/wp-content/uploads/sites/2/2015/06/AllClear-Travel-Insurance-Logo-AUS-min.png") no-repeat scroll left center;
  float: left;
  left: 52px; /* issue here causing the white space */
  min-height: 88px;
  padding: 0;
  position: relative;
  width: 100%;
}

to fix this add below

.site-header {
  overflow: hidden;
}

[Tmgale]

Nice!!

So should I add directly below the first bit of code, or the bottom of the style sheet?

Thanks so much for the help! :):)

I added it and it worked!!!

Thanks so much for your help jamie!!

[James]

doesn't really matter

the overflow hidden should be fine just in the main part of the stylesheet

find the ".site-header" and just add the overflow: hidden; to it.

[Author]

Posts