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/
Related
I'm developing a wordpress theme and I'm having a bit of a problem.
In my homepage I want a wide background image with some text centered on it. So far pretty standard.
The thing is, I want the height to stay the same and as the browser gets smaller, the image should crop from both sides accordingly so the image stay centered.
Here is a great example I found, try resizing it and look at the big image at the top:
http://www.shopstyle.com/
How can I get this effect?
Thanks in advance! :)
You can use property background-size with value cover, which was made for that purpose
cover
A keyword that is the inverse of contain. Scales the image as large as possible and maintains image aspect ratio (image doesn't get squished). The image "covers" the entire width or height of the container. When the image and container have different dimensions, the image is clipped either left/right or top/bottom.
set the height you need (you can set different height for FHD, HD, Tablet, Mobile with media queries) and the image will be cropped from sides and zoomed if needed (if it's shorter than height you set)
Additionally to using background-size: cover;
You should use view port height to control the height of the image. This way it will always be a certain percentage of the view port height, no matter if it's a desktop, laptop, phone, etc. It's the more fluid way to display a height.
Example (covers the whole screen):
.yourelement {
height: 100vh;
}
Example (covers half the screen):
.yourelement {
height: 50vh;
}
Adjust accordingly.
The main content column of my website is too wide for 1920x1080 resolution, so I'm trying to limit the size by using the max-width property, but when I do that the column is no longer centered. So every time I reduce the maximum width (let's say from 1600 to 1400px), the main content gets "chopped off" on the right side instead of being centered. Here's screenshot to demonstrate:
Note: I can't use margins for this because it will make the column too small on lower resolution devices.
Add the following CSS:
margin: 0 auto;
This sets the margin-left and margin-right properties to auto which centers a fixed width element (such as your max-width element).
Now, as for lower screen stuff, you should try to reset the margins on lower screen devices with a media query.
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..
Best visible here: http://blurrapp.com
(It's the big green banner image.)
Right now I capped the image at 2560px in width, and until the 4k revolution comes along that should be fine. But if someone does happen to stretch it even wider for some reason (over multiple monitors?) I want it to not repeat as it currently does, but stretch the image's width to fit.
Is this possible to do through CSS and not needing JavaScript?
That part of my SASS just looks like this:
.banner {
#include box-shadow(rgba(0, 0, 0, 0.30) 0 4px 10px 0);
background: url(../images/banner-bg.jpg);
height: 522px;
How would I accomplish this?
Add:
background-size: cover;
This ensures that the image will cover the entire area, in your case the image will almost always retain its height until the width of the banner becomes greater than the original width of the image, then it will start to expand in size to fit the width. It won't look perfect if someone expands their browser to this size but not much will at this width anyway.
http://www.css3.info/preview/background-size/
I'm making a responsive blog for both mobile and desktop users (all in one). With respect to image resizing, I understand that I can use width:100%; height:100%; so that they scale proportionally depending on the page size, but I've noticed that smaller images upscale to fit the width of the DIV that it is in. Let's say my DIV has a max-width of 640px but an image I include within it in 500px.
What CSS can I use to keep the image at 500px and then scale down proportionally if the resolution width falls below 500px?
The reason I'm asking this is because not all images in posts may be 640px wide.
Set your image max-width property to the actual image size.
Why don't you just set max-width:100% and leave width off.