I have a simple responsive webpage that can run in two columns, with css for each div being
.half {
width: 45%;
min-width: 300px;
float: left;
}
For wide screens each div column gets half the width, for narrower screens the columns compress until they reach 300px, and then they wrap. Basically works OK.
However, when the screen is 400px wide (say) the columns are still compressed to 300px. (Because half of 400px is 200px, so min-width of 300px takes priority. But in this case I would want it to be the full 400px as there are no other columns to its right.)
Is there a easy way to stop that?
There are new flex-box options, but I need to run on the public web, lots of browsers and phones. Something that polishes for newer and works for older is OK. I do not want to add JavaScript just to do this.
I think that the answer is a simple NO, not possible. But I would appreciate confirmation that I have not missed something.
(There are a number of similar questions already but none that I could find that address this simple case specifically.)
(Edited to address confusion in comments.)
I assume you are wanting to implement a media-query to specify new rules once a window is less than a specific width. Therefore, you could do something like:
// Override styles for elements once the element is less than a specified width
#media only screen and (max-width: 400px) {
// If window is less than 400px, apply new styles. ie: width takes full width
.half {
width: 100%;
}
}
Which will make the .half class 100% width once the device/window is 400px or less.
Example of media-query provided by misterManSam: JS Bin
As per my understanding you need like this:
.half {
width: 100%;
min-width: 300px;
max-width: 500px;/*define max-width as you wish*/
float: left;
}
Related
I have learned from similar questions that min-width always beats max-width, which is unfortunate, because I think modern websites mostly require it the other way around.
I often have to resort to media queries to solve the below problem, but hoping there is an elegant/better solution:
Say I have a div:
<div>Words on a page. Words on a page. Words on a page. Words on a page.</div>
I often wish to have this div width to be at least 500px, as long as it's not bigger than 90% of the screen width. This can be accomplished with:
div {
min-width: 500px;
max-width: 90vw;
}
Now the problem with the above is it overflows on mobile.
I encounter this all time when I have a list of objects, and say the items are deletable, then if one deletes the widest element, the whole design jumps as it resizes. To minimize this effect, I wish to have a default width and allow it to expand in rare cases as needed.
Do it like below:
div {
min-width: min(500px, 100%); /* will take less than 500px if there is an overflow */
max-width: 90vw;
border:1px solid;
}
<div>Words on a page. Words on a page. Words on a page. Words on a page.</div>
Are you looking to set the min-width to no more than 90% of the width of the screen but if the screen is wide enough then 500px.
If so maybe try:
div {
min-width: min(500px, 90vw);
display: inline-block;
background-color: lime;
}
<div>Some text </div>
I have an image floated to the left of some text:
<style>
img {
float: left;
}
</style>
<div>
<img src="anything.jpg">
<p>Lots of text.
</div>
The image could have any dimensions. I would like to do the following using just CSS, across all form factors:
if the image is at least as wide as the page, display it full width (width: 100%); and
if the image is narrower than the page, restrict its width to a maximum of half the page width (max-width: 50%).
Is that possible?
Edit
Ok, not possible is what I feared, but I really hoped I was just missing something.
I can't create CSS rules/media queries dynamically, all the content is static (in fact there's no server).
I'm wondering if there may be a kludge that's Good Enough: adding a class to the images depending on their size (e.g. .img-500 for images with a width 500px to 599px, .img-600 for 600px to 699px....), and using media queries based on those:
#media (min-width: 501px) {
.img-500 {
max-width: 50%;
}
}
Would be interested to hear if anyone has tried that, or knows of a reason that approach is doomed?
As far as I'm concerned, conditionals on width can't be done with CSS only. However you can use two classes one with width: 50% and the other width: 100% & use JavaScript to switch between them when needed:
$(document).ready(function() {
$("#image1").load(function() {
if($(this).width() < $(window).width()){
$(this).addClass("width50");
}else{
$(this).addClass("width100");
}
});
});
I'm having an issue with max-width/max-height inside of media queries. Basically what's happening is I have an image gallery that uses jQuery to display a modal window. This modal window consists of the modal, a content box, and an image viewer which has some buttons inside for navigation thru images). I have the max-width/max-height set in vw and vh in css but the exit button gets cut off on a mobile device.
Current CSS:
#photoViewer {
display: inline-block;
position: relative;
margin: 0 auto;
width: 0;
height: 0;
transition: width 0.5s, height 0.5s;
}
#photoViewer img {
position: absolute;
top: 50%;
left: 50%;
max-height: 70vh;
max-width: 70vw;
}
I tried using a media query:
#media screen and (max-width: 955px) {
#photoViewer img {
max-width: 50vw;
max-height: 50vh;
}
}
but it's not changing anything. I found if set hard "width" and "height" rules it works but the max- seems to throw it off. Any ideas?
Here's a fiddle that demonstrates kind of what I'm working with (my whole code is pretty large):
https://jsfiddle.net/jessereitz1/6nxg21a3/3/
At least in the fiddle you posted it works:
The images' original sizes there are only 200x133px or vice versa. With max-width/ max-height values they will never get larger than their original size.
Only if the screen/viewport becomes less than 400px wide, the max-width: 50% will have an effect (for landscape mode images, that is - portrait even less: narrower than 266px).
Thanks everyone for your help and insight. I just found the biggest bug anyone can find in their code: human error and stupidity. I found I had placed an identical CSS rule at the bottom of my code setting the img max-height/width to 90vh/vw. I can now say I've learned to scroll through ALL my code before hopping on here! Thanks again!
Just an FYI...
Another human error to watch out for that wastes a lot of time due to sometimes working and sometimes not is when media queries are listed in the wrong order.
Sometimes they can get out of order unexpectedly, especially when changing from min to max or vice versa.
When using max-width, check to make sure all queries appear largest to smallest width (1200px, then 992px, etc).
When using min-width, check to make sure all queries appear smallest width to largest (576px, then 768px etc).
Another possibility is that you have a min-height set on that element, which would override your max-height setting.
I built a site where nearly every element got it's size in vw-units. So text, padding, margin, height and width of every element is set in "vw". This works great.
My problem is that there should be a change and now the site should not scale over 1200px-width any more. That means if the screen is wider than 1200px the site should not fill 100% of the width and every element should be as big as it would be on 1200px screen width.
For sure I have a div with a max-width of 1200px but everything inside is still growing with the screen.
I know that I can use 1200px as a breakpoint and that I can define every element again beyond that. But that is what I want to avoid.
My question means: Is there any way to modify the css-unit "vw" in the way that it uses 1200px as base-width for every wider screen than that?
If you're uing a container element, you can set it's max-width, which will not allow the width of the element to exceed the amount you specified.
html, body {
height: 100%;
}
body {
background-color: #faa;
width: 100%;
margin: 0;
padding: 10px;
box-sizing: border-box;
}
#container {
background-color: #afa;
width: 60vw;
max-width: 200px;
margin: 0 auto;
padding: 10px;
}
#container p {
margin: 0;
}
<div id="container">
<p>This div's width can't go any further than 200 pixels.</p>
</div>
I found your question after having solved the same exact problem, and then wondering if there was a different solution. It seems like it’s a common issue right?
Unfortunately, my solution probably won’t work for any one since I have a very dynamic site where almost all my CSS dimensions get put through a function at runtime. Therefore it is able to modify it for exactly this situation. It works for what I’m doing but I can hardly recommended as a good practice.
The only other solution I could think of is to multiply everything by a sort of fake VW unit.
.dog-image
{
// 50vw
width: calc(50 * min(1vw, 12px));
}
So when the screen is wider than 1200px then it is limited to 50 * 12px.
I haven’t actually tested this so I don’t know if there are any rounding errors. An alternative approach should fix that.
width: min(50vw, calc(50 * 12px));
If you’re using a css preprocessor you could probably make a function to do this for you.
How do I design an HTML page such that on reducing the window to half width the HTML elements also get reduced to half width?
As per Tim's original comment, you sort of have two choices which are not mutually exclusive (you can combine them).
If you want the elements to scale, you just need to use percent values. To manage things, you probably want to set your minimum and maximum widths statically, and work it from there.
CSS:
div { margin: 0; padding: 0 }
.pagewrapper { max-width: 1024px; min-width: 800px }
.halfwidth { width:40%; margin-left:5%; margin-right: 5% }
HTML:
<div class="pagewrapper">
<div class="halfwidth"></div>
<div class="halfwidth"></div>
</div>
This is a stupidified example. It takes a bit of thought to do it right, possibly using classes for the first "column" and the last so that there's only padding on one side or the other.
In addition to or instead of fluidity there are media queries:
#media only screen and (max-width: 1023px) {
body {
font-size: 0.8em;
line-height: 1.5em;
}
.pagewrapper {
max-width: 1023px;
min-width: 0;
}
}
Again, possibly not the best example because there's more to think about than just adjusting a few dimensions.
All told... if you're completely unfamiliar with the concept, I suggest learning from a framework that has already done most of the legwork (for example, 1140 grid at http://cssgrid.net) and then you'll be able to pick and choose which techniques are right for you. Or at least read some articles, since an answer at SO isn't going to get you far enough into an understanding of fluid and responsive layouts.