I have been trying to solve this for days but can't solve it. (I'm usually quite okay with css). The website is www.auralaid.com.
On the homepage, there is a white spacing which I want removed. The class that is causing this issue is flex-viewport whose height is always slightly more than the "gray fabric image" it contains, leaving a white space at the bottom.
How do I remove the white space?
P.S. I can't set a fixed height otherwise the contained image will be cropped when minimising the browser.
white spacing http://auralaid.com/wp-content/uploads/2013/11/Screen-Shot-2013-11-09-at-9.34.02-pm.png
you should post your code to get the perfect answer but i guess there is a problem of positioning of the div in which these two images are and also set height of image according to the div positioning.
Perhaps you should check your margins? We need the code to answer your question definitively.
For me it seems the h1-tag is responsible as with
.slide-content h1 {
display:none;
}
the white-space will disappear.
Related
I was having problems whit this for a while, and I know that some other people were too
image problem
As you can see in the image, there is an excessive white empty space in the bottom of the page, it's because there was a component just there, but it was moved up with "position: relative;" and of course, the element moved up but it's still taking its original space at the bottom
I was trying to define the height of the body, as well as to center the components and set a margin:auto; but it doesnt work
Any idea?? THANKS!
give your plans a margin at the bottom and you decrease the margin-bottom to reach that space that you want for example:
.image-plans-hosting{
margin-bottom: 200px;
}
You can use the inspector in your browser to find the values you like the most.
I have simple page using a two-column page layout that breaks on zooming. Here it is - try zooming in with cmd+:
http://jamesabbottdd.com/ems-with-max-width.html
The header breaks on the right side, causing a horizontal scrollbar to appear. Originally I thought this was due to using pixels for sizing elements and setting max-width. This article is about that very problem:
http://blog.cloudfour.com/the-ems-have-it-proportional-media-queries-ftw/
Then I overrode pixels with ems but the problem persists.
This intrigues me to no end. I’ve been using CSS for about a decade now, the last 3 years on a high level, but haven’t yet figured out why the above page breaks but this one:
http://framelessgrid.com/
does not, regardless of how closely I zoom in.
Any help greatly appreciated.
Hmmm, it looks a bit like you've inadvertently linked together two slightly unrelated observations, making it a bit more difficult to diagnose the actual problem.
Separating the Symptoms
Based on your screenshot, it does appear that your header is coming up with some visual glitches. Additionally, a horizontal scrollbar appears - but rest assured that this is not due to any property of your header. In fact, it is due to your wrapper div below the header, which has a width of 1130px. So when you zoom in that much, it can't all show on the screen, and thus creates the scrollbar.
The True Issue
Returning to the problem with your header though, the reason why the colour is disappearing is because your header div has a width of 100%. If, when you took that screenshot, you were scrolled all the way to the left, you would have seen no problem with the header's background colour, because it would have covered 100% of the browser's width. (If you're wondering where this width of 100% came from, it's due to the h1 element inside the header; an h1 generally has a default width of 100%, a style you wouldn't be able to see even with an element inspector like Firebug open.)
Note that the site you provided does not display this issue due to a few things: first, its header doesn't have a background colour, so you wouldn't see any kind of issue in that respect (if it did have one though, you'd immediately see that the div doesn't actually span the whole screen as yours does; it is only a little wider than the text within, and has a fixed width. The title is centred not through only usage of the h1 element's width of 100% and text-align:center, but is also due to the margin:0 auto applied to the header div. But now, how to fix your issue?
A Solution
With the current structure of your page, the easiest solution would be to give your header div a defined width. Well, not a width per se, but rather a min-width, one which is identical to the width of your wrapper div. If you give it the style of min-width:1130px, you should see your problem solved.
I hope this was helpful! (Sorry if it was a little long to read, though.)
No mater how much I play around with padding and margin properties I can't seem to solve an issue I have on larger screens - the bottom of the html has a "cut off" where it appears to have a margin from the bottom of the screen. I do not know which element this is but all the elements have been reset to have 0 padding or margin.
When I add the following css I find that the gap really is at the bottom - there are no elements underneath:
* {outline: solid 1px;}
Here is a url to the site if any kind person would like to take a look: http://preview.tinyurl.com/7ywoqpf
Your div.holder has a min-height of 650 pixels.
When I remove that, the gap vanishes for me.
The best thing to do in these cases is a document inspector like Firebug or Chrome's built in one. They will show you which elements in the DOM take up which space exactly.
Remember that block level elements will fill their container widthways but not in height. So maybe it's the case that divs and containers within your page aren't tall enough to reach the bottom. There's something called a "push divs", "sticky footers" where that div will stay at the bottom. Maybe you'd put your background image within that and it'd stay at the bottom. There are several errors in your css though, and you can't have .5 of a pixel.
I fiddled with firebug and noticed that setting:
html {height: 100%;}
has solved the problem, will update the site later this evening
I'm sorry if the question's title doesn't really make sense but it's a problem sort of difficult to describe with words when English is not your first language. The best way would be to show what I mean by a fiddle.
jsFiddle - problem
In this example I have a container div with overflow: hidden and some top padding. The relatively positioned div with content class in the project is scrolled by jQuery, but it's not relevant now. Let's say that the example shows a situation where the content has been scrolled down a little.
The div has moved upward and sadly the content "ignores" the container's padding, which is correct and expected html behaviour. However in this case I have to "prevent the padding from disappearing". The html structure must remain the same - the content div must be directly inside the container.
I came up with a solution using another div posing as "padding" by using absolute positioning and z-index.
jsFiddle - solution?
My question - is there a prettier way to achieve this result?
The only improvement I'd suggest is from a visual/design perspective:
Instead of having the solid white #fff in your mask class, perhaps an image with a gradient from transparent to background colour (white, in your case), so the text looks like it's going behind something rather than just getting "cut off".
Have uploaded a fiddle here: http://jsfiddle.net/kdFgn/30/
Please have a look at this page www.pixeli.ca/issue.
I have begun making a page layout using CSS framework 960.gs. My problem is that there is some strange space appears between block with top image and blue block with "hello" string. So you can see a green stripe there that shouldn't be visible at all. I tried different variants and have no idea what's wrong with it. I noticed that it happens only with the block with images inside them, but if there is only text, no space happens.
Thanks.
Simply adding float:left to the image fixes it.
<img src="imagetop.png" style="float: left;"/>
Not quite sure why or if there's a slightly more accurate method but hey, there you are.
Actually: why don't you set a background-image and height on the container. That would be a much cleaner way of doing things.
what i do at the beginning of each css sheet is adding this
*{
padding:0px;
margin:0px;
}
this removes all default spaces, might help.
The image is inline and is treated as text - so it gets aligned to baseline which adds a bit of space under it as a normal line would do.
set image to display:block and it should work.