Unwanted white space on right site (small screen only) - html

I have a responsive site I am working on. It has a gap of white space on the right side of the screen at screen sizes roughly below 767px. This is the point it goes to the "mobile" layout. I had the same issue on the desktop size and fixed it by setting the footer to 99% width and it fixed the issue on the larger screen sizes. I tried playing with the footer width for the mobile size, but with no luck.
I have not idea what is causing this white space on the right side of the screen on smaller viewports. I tried the inspect tool in the console, but I couldn't find the problem.
I would post code, but seeing as I can't track the problem down, I wouldn't know what to post.
URL of page: http://sevenclanscasino.designangler.com/warroad/warroad-home

For anyone with a similar issue and struggling by hovering over elements in devtools, I came across this trick on another forum.
* { border: 1px solid red !important; }
This very very helpfully shows you all the boundaries in your project. In my case it was a grid overflowing its parent. Enjoy!

Try to change some elements into your css.
.row { margin-left: 0; margin-right: 0; }
header #top-nav-container #top-nav { width: 100%; }
header #top-nav-container #top-nav { margin-left: 0; }
another way (but please dont do that) :
body { overflow: hidden; }

When working on a responsive website, you should always set width values in % rather than px. So try setting with:100%
Hope this helps.

Related

Ways to remove mysterious space of Html, Body after footer in Bootstrap?

I'm fairly new to CSS responsive coding. I've used a premade boostrap template and modified it. Its working fine. The only issue is when this website is viewed on Firefox responsive design tool at different size a mysterious white space appears after the footer.
Check the screenshot below for the mysterious white space being shown when i try to view the webpage on Firefox responsive design tool at: 768x1024 . How do we remove or hide this extra space ? I have tried; overflow:hidden; but its not working. Check this Website Link for the online version of the page
Please check the image screenshot.
That space is due to the site not being 'long or tall enough' for that specific device. You can fix it by instead of using height:auto on your .wrapper element, use height:100vh.
.wrapper {
min-height: 100%;
height: 100vh !important;
margin: 0px auto -155px;
border: 1px solid #F00;
}
100vh will get the vertical height of the specific viewport that it is being used on so it will always take up the screen.
Here is a little more on Vertical Viewport Heights
Hope this helps!
It is your footer element which is at the bottom of the page.
.footer, .push {
height: 155px;
}
Also, your fix is a greasy on and won't work always:
.wrapper {
margin: 0 auto -155px;
}

White right margin on mobile devices

I made a website which displays correctly on desktop but on mobile devices I get a large white margin on the right side of the screen. I tried every solution I found so far, meaning the following basically:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: auto;
}
Tried every combination but the most I could get out of it is that I didnt have the margin but instead a vertical scrolllbar which isnt too good either. Could please someone help me with my issue?
You can see this problem here.
You should set also max-width: 100%;, or try to find element in your html code (using development tools in your browser) which has width property value higher than mobile screen resolution.
I found that the .menu2 class element have negative margin value. Setting this to 0, and changing width of .main element to 100% instead of value in ems solved this problem in my browser.

Header not 100% in width when zoomed in

This is kind of weird, and I don't know how to explain this much here. When you zoom in to my website and scroll to the right, the header part + title box is missing. This does not happen when it is zoomed out. Previously, I set the body-width to 1024px and when I zoom out the entire page zooms out to the left (which is not desired if someone has a higher screen resolution) and I prefer it to remain centered. So, I let the body fill the full width but this does not appear to do so for the top part. Not sure what is causing it.
header {
width: 100%;
body {
width: 100%;
}
See my website here and you will be able to understand.
JS fiddle here: http://jsfiddle.net/D22Jd/
Zoom in and scroll to the right to see what I meant
Adding the below code to CSS will fix your issue.
html, body {
min-width: 1024px; /*adjust as per your need*/
}

How to center content in a div in responsive skeleton?

There are similar questions to this but none of them are solving this problem.
I have built my site using a skeleton framework (http://www.getskeleton.com). For some reason, when i try to apply padding or any margin greater than 5px to the content in the main div on the site, the text portion jumps below the image. I've tried using their "offset-by" classes but the same thing happens. I've tried using
margin:0 auto; on all divs in that section but to no avail. I've also tried using text-align:center; but that didn't work either (oddly, this only centers the h1 element in that section but nothing else...).
The other issue I'm having is that I want all the backgrounds to expand to fit the width of the browser window and all the content should remain in the center but that doesn't seem to work well with this layout. If I set the container div's width to 100% it does expand but I end up having to set all the column and offset-by classes to 100% as well and then that messes up the navigation, etc. I want to keep my layout how I have it now but I just want the backgrounds to expand (including footer height) and for all content to be centered.
Here is the screenshot of what it looks like in the browser: http://i.imgur.com/K3LAshv.png
Can anyone please take a look at the code and let me know what I should fix here? I've added my code on JSFiddle:http://jsfiddle.net/z9uVK/
Many thanks in advance!!
The skeleton is confusing the hell out of me, there is just so much going on... so I eliminated all CSS and added a few simple rules demonstrating the techniques I would use to code this behavior from scratch
Since you want the background color bands to extend beyond the container, I am setting the container to 100% and placing extra divs around each of header, main and footer. These have width 100% also. The width of #header, #main, footer is set to 960px by default and reduced with a media query. I have also set the columns and the headshot image to use percents instead of pixels. I also removed a couple inline style rules from the HTML because they were breaking this new code.
http://jsfiddle.net/W7wG3/1/
// part of my css:
.container{width:100%;}
#headerBin{
background-color: white;
border-top: 15px solid #4d4d4d;
}
#header, footer, #main{
width: 960px;
margin:auto;
}
#media only screen and (min-width: 768px) and (max-width: 959px) {
#header, footer, #main{
width: 768px;
margin:auto;
}
}

Lines in web layout for some resolutions

I have a problem with the layout I'm creating- problem being that in certain resolutions (or if you zoom in) you can see where the outlining of the div boxes are.
Here's what it's supposed to look like:
Here's what it looks like at some resolutions (or zoomed in):
If you need to see the website, it's here, though obviously it's not finished yet. You might immediately see the problem based on your resolution, if not you could zoom in or change your monitors resolution.
I would imagine this is a common problem with an easy solution. Thanks for your help!
If you change your #righthand to have a float:left, the vertical line at the right disappears.
#righthand {
width: 368px;
height: 373px;
background: url("../img/right.png");
float: right; // CHANGE TO LEFT
}
And if you change your #tp to height:248px, the other horizontal line disappears.
#tp {
width: 1024px;
height: 249px; //CHANGE TO 248px
}
I didn't have enough time to look at the site before it was taken down but I think it could be as simple as setting
background: transparent url(imgsrc) no-repeat left top;
that shorthand for the background image in css will lock in the spot. Other than that I would make sure you have
margin: 0;
padding: 0;
so that you can specify the exact width and make sure the cuts that are made are done to a grid so that when you slice the image you have an exact width.