Image max-width not working in media query - html

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.

Related

Responsive layouts with min-width, width%, no easy way to avoid gaps?

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;
}

How to give general maximum to a html-site completely based on css with vw-units?

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.

White right margin on mobile devices

I made a website which displays correctly on desktop but on mobile devices I get a large white margin on the right side of the screen. I tried every solution I found so far, meaning the following basically:
html,body
{
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
overflow-x: hidden;
overflow-y: auto;
}
Tried every combination but the most I could get out of it is that I didnt have the margin but instead a vertical scrolllbar which isnt too good either. Could please someone help me with my issue?
You can see this problem here.
You should set also max-width: 100%;, or try to find element in your html code (using development tools in your browser) which has width property value higher than mobile screen resolution.
I found that the .menu2 class element have negative margin value. Setting this to 0, and changing width of .main element to 100% instead of value in ems solved this problem in my browser.

Having both portrait and landscape images auto-crop to fit a thumbnail

I've been making a responsive image thumbnail gallery for a portfolio using this "Tutorial".
This tutorial is quite complete and pedagogic (I'm a big noob), but doesn't cover one part: The tutorial maker uses images that are all in landscape style.
For my portfolio, the thumbnails are going to be alternating both landscape and portrait oriented images.
Using both kinds of orientation gives a sort of an unordered look and feel to the divs, which isn't what I'm going for.
A simple way to solve this would be to manually crop portrait images to fit landscape style. It's kind of an archaic technique I'd rather not resort to.
I realize that another way to do this would be, not to use the img tags, but rather using background-image and background-contain on divs fit to the image box. Something I'd rather not do as it would mean creating a new css class for every thumbnail (I think, not sure)
Someone had the same sort of problem, but he uses jquery to fix it. Since I'm learning css, I think it might be better for me to try and fix this problem using only css.
"Link"
My major constraint is that I want the page to stay responsive, as well as have my images keep their aspect ratio, so a width:100% and height:100% is out.
If you'd like me to make a fiddle, just ask and you shall be given.
Thanks for reading, hope I made myself clear, English not being my primary language.
EDIT: Here's a fiddle showing how the <img> <div> and the css are. http://jsfiddle.net/R8B27/ (I suggest resize the "result" box to exactly see how it messes up)
L.
The main issue here is the vertical alignment of images that are cropped (in your case portrait orientated images).
If you can go with default alignment of these images, this means only the top of the image is shown, you can use this technique :
FIDDLE
The CSS I added/modified from your example :
.galleryItem a{
display:block;
position:relative;
padding-bottom:50%;
overflow:hidden;
border-radius: 5px;
}
.galleryItem a img {
position:absolute;
width: 100%;
height:auto;
display:block;
}
I had a similar situation in which the solution needed to be inclusive to both portrait and landscape pictures. This was my solution:
min-width: inherit;
min-height: inherit;
max-height: 63vmin;
object-fit: cover;
The parent object was a circle with a 'vmin' responsive size, therefore the 'vmin' 'max-height'. 'Inherit's were used to always fill the parent object and 'cover' on 'object-fit' to not lose proportion. 'Max-height' was used as the control factor due to the rarity of portrait pictures exceeding a 1:2 ratio; meaning to control the excess of width cutoff through a height variable.
As for positioning the image inside the div, I recently found the use of this excerpt very useful:
margin: 0;
padding: 0;
-webkit-transform: translate(-50%, 0%);
position: absolute;
left: 50%;
top: 0%;
With 'margin' and 'padding' at '0', you're cutting off excess weight on the pic. '-webkit-transform: translate' will allow you to change the item's origin or pick point. Setting this to '-50%, 0%' will set the origin to the center-top of the pic (this should always have negative values for the origin to be inside the item). 'left: 50%; top: 0%;' will set the placement of the origin of the item to be at center-top of the container.
In all latest browsers(supposing your not using IE anymore) you can use "object-fit" for this purpose. just add this css:
.center-cropped {
object-fit: cover;
object-position: center;
height: 200px;
width: 270px;
}
...
And in html, you can use this class directly in the img tag:
<div>
<img class="center-cropped" src="~/Images/yourImage.jpg" />
</div>
This will show only a "centered" version of your image, for both portrait and landscape images

make website adapt to all display size - HTML

I'm writing a website with HTML and CSS. My problem is that when I for example run my website in my browser, I adjust all the margins with percent. But then when I run my browser in fullscreen or if I adjust the size of the window the websites different parts fall apart and doesn't fit together as they should. Why doesn't the percent unit fix that problem since it's relative to the size of the window?
CSS:
#aboutMeDiv
{
background-image: url('noisyBlue.png');
position: absolute;
width: 100%;
height: 118px;
margin-top: 13.6em;
margin-left: -0.7%;
opacity: 0.5;
transition: opacity 0.3s;
}
How can I make it "the same way" even if the window changes?
Thanks!
A more precise answer cannot be given without seeing your code, but this issue can probably be solved by adding a min-width and max-width to your container element.
For example, if the structure seems to fall apart when the width is less than 700px and when it is greater than 1500px, you could use this:
.container {
max-width: 1500px;
min-width: 700px;
}
Of course, this might inhibit responsive design -- especially for mobile browsers. It may be a good idea to check out some already-made CSS frameworks like Twitter Bootstrap and Gumby Framework.
Edit following addition of code to the question:
How can I make it "the same way" even if the window changes? Thanks!
If you want #aboutMeDiv to be "the same way" even if the window size changes, you should use concrete numbers instead of percentages of the div size; i.e. change width: 100%; to a something like width: 700px;. Then, as noted above, you can use a min-width to make sure the screen shows all the content within the div.