Community Forums › Forums › Archived Forums › Design Tips and Tricks › Spacing appear to right of site container
- This topic has 9 replies, 2 voices, and was last updated 8 years, 11 months ago by James.
-
AuthorPosts
-
June 9, 2015 at 1:59 am #155518TmgaleMember
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/June 9, 2015 at 2:53 am #155536JamesParticipanthi there
do you have a link to this site so i can take a look for you.
June 9, 2015 at 2:54 am #155538TmgaleMemberJune 9, 2015 at 3:00 am #155540JamesParticipantoh, 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.
June 9, 2015 at 3:03 am #155541TmgaleMemberYeah 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
June 9, 2015 at 3:11 am #155546JamesParticipantahh
down in the footer, right ? that space.
June 9, 2015 at 3:18 am #155547TmgaleMemberYeah, 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.
June 9, 2015 at 3:26 am #155548JamesParticipantok
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; }
June 9, 2015 at 3:28 am #155549TmgaleMemberNice!!
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!!
June 9, 2015 at 3:32 am #155551JamesParticipantdoesn'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.
-
AuthorPosts
- The topic ‘Spacing appear to right of site container’ is closed to new replies.