Whenever I open my website through a mobile device I notice a white area to its right (which can be seen by scrolling horizontally). I've been trying to figure out what's causing it for hours to no avail.
i tried in css setting my body tag like the following, but the white space is always there,
body {
margin:0;
padding:0;
}
How can I remove this white area?
thank you
Well Your header has rule for min-width.
#header{min-width:688px}
Try removing it, or making it 0;
Related
I have an Image that is supposed to be half hidden on media query mobile screen. it is set as position: absolute and left: 50% so the half side is hidden in the screen, but when I do this, it creates a space at the right side, creating an overflow, which is not good for the appearance. can this be fixed? or is there a right way implementing it? I've seen other sites have this kind of sections but the scroll the whitespace on the right doesn't appear? or is the overflow hidden for the body just disabled?
I've provided a visual on the problem, hope you can help me with this. still learning CSS.
the black one is the screen, purple one is the new width and the red one is the image. thanks in advance.
You can try this:
html
body {
overflow-x:hidden;
width: 100%;
}
It will force the site to be 100% of the available space and hide any horizontal scrolling.
I had the same issue at the bottom, but this resolved it White gap at the bottom of web page
I tried doing the same thing for the right but nothing happens.
It seems to only happen at a certain window width.
The Problem is width of your form element(width: 48.821174201%;).
Solutions:
#plans .affiliateSection form
{
background-color: red;
/* Add width:auto;*/
width: auto;
}
OR
#plans .affiliateSection
{
overflow:hidden;
}
Jsfiddle
There is a fair amount of bad HTML markup on this page. I would start by fixing the mismatched tags. View source in FireFox and you'll see that it will light up all of the errors in red text. You can hover over the errors and see what the problem is.
After you've fixed the HTML markup. You can look into what is causing the white gap to the right of your page. It is due to several elements on the page that are too wide, or have too much margin to the right of them. Use your browsers inspector to find and fix these elements one at a time.
It seems I'm having an issue with a design I'm working on. I'm using the kickstart HTML framework but I have a couple issues.
Firstly is that there is a very large white gap between the top of my page (logo, navbar) and the text.
Secondly I've tried to overlay the logo over the the navbar by using z-index. However it causes a negative horizontal scroll. I've tried to hide it by hiding overflow-x but it just doesn't seem like the best solution.
You can see the issues at http://jkr.me.uk/problem.html
Thanks,
John
Using position: relative on the logo makes it take up space that you're refferring to.
Instead, use float: right, or position it with position: absolute;
The issue with the white gap is the image. If you disable the position:relative property the image bottom will be touching the top margin of the fist header tag. A dirty fix for this would be something like margin-top: -200px on the first header or alternatively margin-bottom: -200px on the logo image. You could also use the method from the previous answerer.
As for the logo image overlaying the navbar, it does for me in both Chrome and IE 9.
I believe that I have incorrectly used a combination of float, margin and background image. The issue is a white gap at the bottom of my screen when viewing html doc.
The desired outcome is to have no white gap at the bottom of the screen - where the background image starts at the bottom.
When viewing the page with following code:
* {outline: solid 1px;}
you can see that there is a line along the bottom which must be the html or body element. Whats the space between that and the bottom of the screen? How do I remove it?
Here is the URL major thanks to anyone who helps me solve this headache: http://tinyurl.com/7ywoqpf
Try
html{
min-height:100%;
}
Hope this is what you meant.
I am working on my portfolio and I am having an issue with the project description shifting the images on the left downward when the browser resize. A picture of the issue here: click here When you resize the browser the text will shift over and move the images down. I've tried setting min-width but that doesn't help the text nor the image div to make sure it doesn't resize at a certain point.
Here is a sample link to the page itself: [click here][2]
I tried adding min-widths to a image element but that doesn't work either. I do not want to use absolute position as it will overlap on top on resize. Any thoughts or suggestions?
You have an image that is 1052px wide, which is in a UL element that has a margin-left of 1.5em. Your description box is 350px. Basically your #imagewrapper div needs to be equal to or wider than all of these elements.
Right now that's about 1422px. It will change if the effective font size for your UL.imagewrap-pad changes.
That's a pretty wide web site. You probably should make it a bit narrower if you're making it for general viewing, especially with all the tablets etc out there now.
Anyway, the code you want is
#imagewrapper
{
width:1422px;
margin:0 auto;
}
The second line makes it center on the screen.
P.S - get Firebug for Firefox, or use similar tools in chrome. They let you endlessly experiment with styles to find out what works for you.
To solve the problem just set the "width" property in #imagewrapper :
#imagewrapper {
width: 1430px;
}
Have You tried setting up width attr on the parent element to around 1800px?
div#imagewrapper {
width:1800px;
}
It will put a scroll bar at the bottom of Your browser, but if You want to put such a big image beside that text then You do need a lot of space. Just keep in mind that it won't fit in users monitors.
To make it look nice I guess You should apply that attribute to the body tag.