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.
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.
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;
I am trying to add this 3D image as background to the content of a wordpress website
This is the theme demo I'm using
I would like the header part to stay the same size on all pages, the same goes for the footer. But as the body changes from page to page, I would like it to change accordingly but still fit properly to the header and footer part of the whole image.
The problem with this background is the fact that it not symmetrical, so the top & the bottom of the body image suppose to include the top & the bottom of the canvas (the middle part of the image)
I tried different techniques to implement this solution, but couldn't figure it out. The issue is that the body part of the image doesn't repeat-y so well, as it changes throughout the height of the image,
I would appreciate a solution, and it doesn't matter for me if I have to cut the images to a several parts.
Thanks
If you are lucky, you can do something with border-image.
This CSS, for instance,
body {
width:100%; height:100%;
-moz-box-sizing:border-box; -webkit-box-sizing:border-box; box-sizing:border-box;
margin:0;
border-width:63px 40px 133px 40px;
border-style:solid;
border-color:brown;
border-image-source:url(http://webbos.co/vibration/wp-content/themes/vibration-child-theme/images/back1.jpg);
border-image-slice:189 120 399 120 fill;
}
sets the borders to a fixed width (in this case 1/3 of the width of the sides in the image) and distributes the rest of the image over the body background.
Then all you need to do is position the header and footer on top of the border of the body...
Fiddle.
Disclaimer: I've tested in Firefox and Chrome. MDN says it won't work on any other browser.
I'm creating a pop-up with a background image from CSS as below
#gui-01-Qa {
background-image:url(path/to//file.jpg);
background-repeat: no-repeat;
background-position: top left;
}
This all works fine apart from (what looks like) a boarder of approx 5px being added. It's not coming from my code, but both IE and Firefox are adding it. So whet's it coming from ????
Any ideas would help
Many thanks
Giles
That border is most likely a padding or margin on the body element. Just add html, body { margin:0; padding:0;}, or use a CSS reset.
If you're wondering how to stretch a background image to fill the entire window regardless of resolution while preserving the aspect-ratio A List Apart recently published a very good article on the subject.
Maybe the element with your CSS ID "gui-01-Qa" is causing the border. Try to set margin and/or padding to 0.