I have a very strange problem with my responsive css. The body is 90% wide.
If the horizontal resolution goes below 1200px, I change it to 100% (with media queries), but in resolution below 1000px it should be 100% again.
My page has two centered containers, the other on the left side is below (behind with z-index) the right one and it has a background image. Both containers have fluid width.
So basically when the screen width goes below a certain point, the left container with the image goes little be under the right one. The right container has a margin from 20px to leave some space. This 20px margin should be transparent.
This is working fine, but if I scale the browser between 1000px and 1200px, the margin from the right content container becomes opaque, but it should not. It should be transparent, as it is in wider width.
I do not know where this behaviour comes from, since I do not change anything at the margins.
Just scale your browser to a width between 1000px and 1200px then you see the green gap between the image and content. (and if you scale litte more tahn 1200px, you see that the margin is transparent again)
Sorry bit difficult to explain
It doesn't become opaque.
The problem is not with the right div overlapping the left. The problem is with the left div width.
It is 40% and that starts to become less than the image once your browser becomes too narrow.
If you add a min-width:780px to the left div it will work. and since it is fixed and with a lower z-index you do not need to worry about its size..
Related
I'm trying to stretch the div container to fit the whole window. However whenever I set the width and height to 100%, I still get vertical and horizontal scroll bars that barely scroll anything. Hiding it with:
overflow:hidden
hides it but then the border on the right and bottom are missing. I want the div to fit exactly as the size of the window.
http://jsfiddle.net/pqDQB/
What I tend to do in situations like this is tinker around with the unit I am using.
Step 1: Make sure your content doesn't have any padding or margin that causes your issue.
Step 2: I recommend setting your width to width: 100vw and height to height: 100vh. This stands for viewport width and viewport height and will expand your div to cover the whole screen when both are set to 100.
We have been provided a 1500px wide image that is a mockup of a website.
The website design is a fixed width design, where the design takes up the middle 990px of the image. So the 255px on either side of the image is just overhang to show how the site would expand to bigger viewports (ie, it wouldn't aside from some edge elements expanding to infinity).
What I would like to do is simulate this with the image (up as far as it will go). So if the viewport is 1500px, the image would start at 0,0.
If the viewport was 990px or less the image would start at 0,255px.
Anything in between would scale. So I would like to scale a negative margin from -255 to 0 depending on the width of the viewport.
Kind of like the opposite of
margin: 0 -10% 0 0;
This goes in the opposite direction to what I am thinking - as the viewport gets wider, the image migrates to the left instead of to the right.
In your stylesheet you could try using some responsive design techniques,..
#media screen and (max-width:1500px){
#yourContainer{margin-left:0;background-color:#afa;}
}
#media screen and (max-width:990px){
#yourContainer{margin-left:255px;background-color:#aaf;}
}
background color added for testing only ;)
This jsFiddle demonstrates this, just resize the browser window or the fiddle column width - http://jsfiddle.net/vs6uz/1/
I have experienced a frustrating and interesting problem.
The design I am working on is based around a 100% height layout.
A site page always has an image.
Which can only ever be 800px in height.
A max-height of 100% is set on this image.
The results in a site that works nicely on large monitors, but on smaller screens the images will adjust meaning the site always fits nicely.
-
Because the site uses a horizontal scroll, I am making use of a position: fixed, on the #footer nav, to position the navigation in the bottom right.
However, when the screen has a height greater than 800px, this footer #nav remains in the bottom right corner.
I am trying to find a solution that would allow this fixed element, to be fixed, relative to the height of the container div. Meaning the navigation is always 1em above the bottom of the site layout.
-
You can see the site here - http://eastat1003.dev.voodoobytes.net/artists/bukanova/art-direction/idol-magazine-the-selected-ones/
-
Edited 17th May 2012 - Site now live! http://www.eastatheart.com/
Ok, got what you are after, took me a few mins!
I haven't got time to check this now, but it should (hopefully) work.
Create a container element, set to position fixed. Position that to the top right of the screen. Set the width to 0 and height to 100%. Also set a min-height of 800px.
Now, put your nav in there set to position absolute. Then set that to bottom 1em right 0.
That should work, I think...
Hope that helps :)
I have the problem that a div is not scaling over the full page when the page is not fully seen, i.e. scroll bars appear at the bottom.
Scales fine:
Does not scale fine when seen part is too small:
How can this be fixed? Here's the fiddle: http://jsfiddle.net/gdztn/29/
Clarification: The inner div must always be 800 px wide while the outter div should scale over the whole width of the page. As you can see in the second image, the outter div does not reach the right end of the page when scrollbars appear.
Thanks!
the problem is that the #head width is 100% and the inner div has a fixed width. if you scale the page down, it's still 100% but smaller than the inner div. it's like having a smaller container and an exceedingly bigger content which overflows.
to address this problem, you should set min-width of the #head to keep it from shrinking smaller than the inner div, like min-width: 850px
http://jsfiddle.net/gdztn/43/
EDIT: also remove position:absolute from #head. if actually needed to be absolute, then add width:100%
To summarize, I'm trying to get a "resizable page" both in the height and in the width of the window. I've two fixed blocs too. One on the top of the page and an other on the left (like the Flow app for example).
As you can see there, I'm trying to make the yellow part of the screen resizable (css only) but I get some trouble with the height part. The scrolling zone is always counting the height of the top bloc (the red one).
Is there a way to make it javascript free?
The div with id="container" has a height of 100%. This means 100% of the containing id='wrapper' div. One possible solution is to make the heights:
red part: 10% of the total height
blue+yellow (i.e. the "wrapper" div): 90% height
This would mean the "container" wrapper should nicely fill up those 90%.
Edit: only drawback would be that the red part is no longer a fixed hight pixel-wise.