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.
Related
How to use min-width or max-height for panel elements in a responsive theme (in my case Zircon for Drupal 7 is used https://www.drupal.org/project/zircon)? When min-width is used, elements overlap when resized for mobile phones. max-height tends not to be usable. Could you indicate where to change css to make it work for both cases or the one with min-width?
For example, in page.css for adaptive panel elements some classes are used (pane1 and pane2). In total there are 3 panes. The third pane works fine and moves down but pane1 and pane 2 start to overlap each other.
in page.css (Zircon theme):
pane1{ min-width: 300px; }
pane2{ min-width: 300px; }
pane3{ min-width: 300px; }
Use media queries. For example:
CSS:
#media all and (max-width: 500px) {
pane1{
min-width: 200px;
}
}
This code will apply only when browser width is smaller (or equal) than 500px.
I don't know if I clearly understood you, but I hope this will work.
Media queries would be your answer:
#media screen and (min-width: 767px){
.pane1, .pane2, .pane3{
min-width:300px;
}
}
#media screen and (max-width:766px){
.pane1, .pane2, .pane3{
min-width:150px;
}
}
Ok, I know how to build fixed width as well as fluid and adaptive layouts.
I just wonder if I can accomplish this:
- Have fixed width layout for example 960px
- Which falls down to another fixed width layout, let's say 640px, if screen get's smaller than 960px. Thanks!
You have the ans in media queries, use this:
#media all and (min-width: 960px) {
#content {
width: 960px;
}
}
#media all and (max-width: 959px) {
#content {
width: 640px;
}
}
The fiddle is here: http://jsfiddle.net/piyushkmr/V4Q2m/1/
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 was experimenting with media queries to see the effects.
So I tried using min-width(480px) query to change the width of a div from 100% to 520px when the window was maximised but the width of the div stays 100%.
The code:
#box {
margin: auto;
background: white;
width: 100%;
}
// Media Queries
#media only screen and (min-width: 480px) {
#box {
width: 200px;
max-width: 200px;
background: black;
}
}
So my question is, why does the width of the #box stay as 100% when the window is maximised?
What am I doing wrong?
jsFiddled here is your code with min-width:480px. It applies when the size of available space is bigger than 480px (the black box)
try max-width. This context will apply when available screen space is less then 480 pixels. jsFiddled here, black box will be applied when available space width is lesser than 480px
#media only screen and (max-width: 480px) {
#box {
width: 200px;
max-width: 200px;
background: black;
}
}
So, your #box is by default 100% width except when the available space is greater than 480px. your code is working OK.
Maybe it's the comment : // Media Queries witch caused an error ?
I think you have the media query wrong. As you have it now, it's changes the content over 480px. Where I think you want it under 480px.
So it should be:
#media only screen and (max-width: 480px) {
//code
}
Hence, (max-width: xxx) not, (min-width: xxx).
Example fiddle
I had commented the code using // syntax by accident which isn't supported in CSS, hence the code below that line of comment not working. It now works after I changed it /**/ syntax.
I really thought this would be elsewhere on stack overflow, but I searched fruitlessly for length of time. Forgive me if I missed it.
I have a set of images who need to be made as large as possible (width: 100% to container elem) as long as the container does not grow too wide or the image too tall because of the container width. Aspect ratio needs to be preserved.
I thought I could do this with
img { width: 100%; height: auto; max-width: 500px; max-height: 250px; }
The idea was that if the image hit either the max-width or the max-height given the width and the aspect ratio, it would no longer grow. In reality, this causes the image width to size as wide as possible, but breaks the aspect ratio (squishing the image to max-height) when it is too tall, instead of preventing the image from growing wider.
Is there a better way to go about this? I would like to avoid javascript if possible. My tests are in Firefox 9.
A bit old but using top or bottom padding will keep your aspect ratio. Divide height/width and apply that percentage to the padding top or bottom. It can get tricky sometimes but it works.
Here is a good article about it:
http://voormedia.com/blog/2012/11/responsive-background-images-with-fixed-or-fluid-aspect-ratios
You can use media queries to create a stairstep of fixed image sizes, and then go like this:
#media screen and (min-width: 701px) and (max-width: 900px) {
img {
width: 800px;
height: auto;
}
}
#media screen and (min-width: 901px) and (max-width: 1100px) {
img {
width: 1000px;
height: auto;
}
}
Not very pretty, but it works.