I have this:
.buttm{
background: url('http://redshadow67.com/deepest/img/butts/divm.png') no-repeat center black;
width: 100px; text-align: center; color: #f5c324; font-size: 18px; margin: 0 auto; border: 0px;
}
but I want to make the width between 60 and 100 depending on the viewscreen. When I use a percentage it doesn't resize the image, and also I need the text to be a little smaller also. Not sure what to do??? thanks
Have you tried media queries?
#media only screen and (min-width: 1024px) {
// Your custom styles go here.
}
To scale the background-image, use the background-size property. Try the values contain (full image shown) and cover (image scaled to fill entire element).
For width and font-size, use #media queries. You might also want to look into viewport relative units:
1vh: 1% of viewport height
1vw: 1% of viewport height
1vmin: 1% of viewport height or width, whichever is smaller
1vmax: 1% of viewport height or width, whichever is larger
Related
Apologies if the title is hard to follow.
Essentially I want the background image to scale relative to the screen size, but only above a certain point, so if you shrink the screen small enough, the image will not shrink with it.
I've done it with my divs with this:
.row{
width: 100%;
min-height: 70px;
min-width: 1000px;
}
Is there something similar I can do with the background?
This is what I have at the moment.
.body{
background-image: url('../static/banner.jpg');
background-repeat: no-repeat;
background-size: 100% 100%;
}
Media queries can do this for you, just use a breakpoint where the background has stops to scale.
For example, this CSS will apply styles only if your browser's
viewport width is equal to or narrower than 12450px:
#media (max-width: 12450px) { ... }
Take a look at:
https://developer.mozilla.org/en/docs/Web/CSS/Media_Queries/Using_media_queries
This is what I want
If browser is bigger than 900px I want the boxes to be 700px.
Once the browser width is smaller than 900px I want the boxes to be 600px.
#media screen and (min-width : 750px) and (max-width : 900px) {
.multiSelect .checkboxLayer {
width: 600px;
}
}
#media screen and (min-width: 900px) {
.multiSelect .checkboxLayer {
width: 700px;
}
}
My question is, how come the browser width splits around 932px and not 900px?
What units are these if not pixels?
I just tried to measure the browser width with photoshop and it splits at 975 px exactly.
So CSS says 900 px, Chrome says 932 px and photoshop says 975 px
This is really confusing?!?!
The short answer:
You have not reset the box-sizing property for the parent container.
The long answer:
Consider this:
In CSS, by default, the width and height you assign to an element is applied only to the element's content box. If the element has any border or padding, this is then added to the width and height to arrive at the size of the box that's rendered on the screen.
There are two values in box-sizing that you should know about
content-box
[...] the default, and gives you the default CSS box-sizing behavior. If you
set an element's width to 100 pixels, then the element's content box
will be 100 pixels wide, and the width of any border or padding will
be added to the final rendered width.
border-box
[...] tells the browser to account for any border and padding in the
value you specify for width and height. If you set an element's width
to 100 pixels, that 100 pixels will include any border or padding you
added, and the content box will shrink to absorb that extra width.
This typically makes it much easier to size elements.
I usually start any CSS sheet with the following to avoid such issues
* {
box-sizing: border-box;
padding: 0;
margin: 0
}
There are many frameworks that reset more of the default properties such as normalize.css but I often don't have the need to use them.
I set up a demo below. There are two div elements. There is also a media query.
Both elements have the same fixed width in px. The only difference is the value for the box-sizing
The first is set to border-box and the second is set to content-box
div {
width: 400px;
height: 400px;
margin: 3em;
text-align: center;
background: darkred;
border: 20px solid #131418
}
#media (max-width: 800px) {
div {
background: darkgreen;
width: 300px;
}
}
.first {
box-sizing: border-box
}
.second {
box-sizing: content-box
}
<div class="first"></div>
<div class="second"></div>
Notice how they render with different sizes even when the width for both is the same?
Scroll bar width is 17px on most browsers, and does not contribute to the screen width. Try using Firefox's responsive design mode, in the dev tools.
It does possible to adjust the width of a div as the width property of the browser is decreasing or increasing using pure Css?
I mean, if I have an element like this in a resolution:
div {
width: 20%;
}
Then, I want to increase 1% the width of the div for every 10px that I decrease the width browser, it's possible using just Css3?
Decreasing width as window is descreased is easy with CSS. Increasing width as window is decreasing is not.
Its possible to use a css only solution, but it will require a wild amount of #media queries:
JS Fiddle (using larger percentage for example)
#media only screen and (max-width: 400px) {
div {
width: 20%;
}
}
#media only screen and (max-width: 390px) {
div {
width: 21%;
}
}
#media only screen and (max-width: 380px) {
div {
width: 22%;
}
}
etc...
CSS doesn't have the logic built in to calculate the width of a viewport AND apply styles based on it without manually doing it with a media query. A js solution would definitely be recommended.
This also may help you a combination of the following code and use of calc() in CSS could help.
vw, vh
1vw = 1% of viewport width
1vh = 1% of viewport height
Let give it a try with your code.
I don't know if the title is quite correct, but what I want basically is to create a div element that stays proportional to the resolution of the screen. For example, if the width is 1900px I want that the div have:
width: 1115px;
height: 775px;
But if the width of the page is 1050px I want:
width: 620px;
height: 430px;
What should be my CSS to allow this?
So I want that the width is a percentage of the screen, let's say, and the height is based on the width.
There are two solutions to make the element proportional to the screen, one which depends on your setup.
You can use percentage
width: 20%;
But this only defines a percentage of the parent element, and does not make both your width and height proportional
You can also use viewport units. This defines a percentage of the viewport. If you use viewport width vw you can get a height which is dependent on the width.
height: 10vw; /*10% of viewport width*/
width: 10vw;
You do have to be aware that this is relatively new, so do not forget to check "known issues" on caniuse.com
You can also setup media queries to handle smaller or bigger screens.
#media (max-width: 300px) {/*10% of 300px is very small, so we change it to 90%*/
.selector {
width: 90vw;
}
}
Here is the solution, simply you should calculate the desired aspect ratio, i.e. width/height:
Maintain the aspect ratio of a div with CSS
You can use CSS media queries, like this:
.selector {
width: 1115px;
heigth: 775px;
}
#media (max-width: 1050px) {
.selector {
width: 620px;
height: 430px;
}
}
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%;
}
}