Which is the proper way to set width to an element, setting width to let's say 960px and max-width to 100% or the other way arround width 100% and max-width to 960px?
div { width: 960px; max-widht: 100% }
div { width: 100%; max-width: 960px }
set width 100% but not bigger than value,
div{ max-width: 960px; width: 100%;}
You can use bootstrap for responsive pages. It will help you to have best width for mobile and tablet. Also use media quires for best. Always go for a max width for a div or container.
Related
For example: I have an element which takes the full width of the viewport. I want its min-height to be half of its width, to get a ratio of 1:2.
On a 1600px wide desktop monitor the element's width would be about 1583px (monitor width minus scrollbar width), but its min-height would be 800px, because vw doesn't substract the scrollbar's width. So that would not be a 1:2 ratio.
An easy solution would be padding-top: 50%;, but if there's text within the element, that doesn't work. Alternative: a left floating pseudo element ::before with padding-top: 50%; would create the desired min-height in the ratio of 1:2, but that would be kinda hacky.
Am I missing something? Is there any clean way?
First thing you should do is include the following so the default padding and margins given by the web browser are removed:
* {
padding: 0;
margin: 0;
}
For the element you want to have 100vw and half height:
.half_height{
width: 100vw;
aspect-ratio: 2/1;
}
.container {
Width: calc(100vw - calc(100vw -100%));
Height: 50vh;
}
I have an image with a 600px width.
It needs to be inside a bootstrap col-xs-6 or 12 div with a width of 300px and has to be resized if the screen width is smaller than 300px.
How can I realize that using width and max-width in CSS?
just do this:
img {
width: 100%;
max-width: 300px;
height: auto;
}
I think this will solve your problem.
img {
width: 100%;
max-width: 300px;
}
If the div width is bigger than 300px image will have maximum width of 300px. If div is smaller than 300px image should fill 100% width of div.
.my-image {
max-width:300px;
width:100%;
}
These rules basically mean, display the image at the full width of its container unless the container is larger than 300px, in which case, limit the image to 300px.
I had my main div set with
max-width:600px;
However, when the content is not long enough that div will resize to the length of the content. Which makes sense.
So Instead I declared:
width:600px;
max-width:600px;
But now the div won't resize down when you resizing the window. I tried setting the min-width:
min-width:200px;
width:600px;
max-width:600px;
But it still won't resize down passed 600px (on window resize);
So what am I missing? Can I use all 3 width settings together? (min-width,width,max-width)?
If so, how? I am trying to understand the logic.
I want the content to stretch up to 600px, but also resize down on windows resize.
I think you want
width: 600px;
max-width: 100%;
This way, the element will attempt to have a width of 600px. But if the parent isn't wide enough, it will be less.
Demo
Just take out the "width: 600px" The div will be 600 px if the browser window is large enough, otherwise it will adjust down to your min width if the browser window is smaller than 600px.
You could use media queries to apply a width for certain screen sizes
.div {
width: 600px;
}
#media screen and (max-width 600px) {
.div {
width: 100%;
}
}
I make some homepage using wordpress.
i use this css code
.container { width: 960px; margin-left: auto; margin-right: auto; }
actually looking good, content's position is center.
but sometimes change content, change margin
my resolution is 1920 width, content's width is 960px fixed.
content 1 has 960px width and margin is 475.75px
content 2 has 960px width and margin is 480px
i want 480px fixed.
what is problem?
Try to add content1 half the width of container , give margin auto .
.content1 { width:475x; margin:auto; word-wrap:break-word;}
I am trying (if it is at all possible) to use css to make an image 100% the width of a fluid div, but as the images are square (and will be distorted if not square) I want to be able to match the height to the width... for fluid width I am using:
.img{
max-width: 100%;
width: 100%;
min-width: 400px;
}
which works fine for setting the width on all major browsers, but I just cant figure out how to match the height to the width :/
Try throwing in height:auto into your class.
.img{
max-width: 100%;
width: 100%;
min-width: 400px;
height: auto; // <-- add me
}
As mentioned in the comments though, most browsers should be adjusting and scaling the images correctly. But glad this could help.
Now, with CSS3 there is new units that are measured relative to the viewport, (browser window), if you want a fluid image with respect to the window this it works better in most use cases than "%". These are vh and vw, which measure viewport height and width, respectively.
.img{
max-width: 100vw;
width: 100vw;
min-width: 400px;
height: auto;
}