Does this look right to you?
Is there anything that should be changed?
Should I be using both width 100% and max-width: 100%?
Which would I remove?
https://jsfiddle.net/jga3o15x/3/
.jacket {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
height: 0;
width: 100%;
min-width: 428px;
min-height: 230px;
max-width: 100%;
padding-top: 55.313%;
}
Is the max-width even needed?
You shouldn’t use width and max-width together unless they have different unit values.
e.g. width:100%; max-width:400px;
The above makes sense but when you specify both with the same unit then what size will it be.
width:100%; max-width:20%;`
Obviously one is redundant because all you will get is width:20%.
You didn’t need either of those anyway because the width is already controlled by the left:0 and right:0 which effectively describe the width and height of the element. The height is controlled by the padding top so you can also lose top and bottom.
You can also lose the minimum width and height from that rule otherwise it won’t fit on a small screen.
.jacket {
position: absolute;
top: 0;
left: 0;
right: 0;
height: 0;
padding-top: 55.313%;
}
That was to prevent this:
I think I got it.
Without min width / height
https://jsfiddle.net/o8bqdL9c/2/
.jacket {
position: absolute;
top: 0;
left: 0;
right: 0;
padding-top: 55.313%;
}
When setting a min width / height
https://jsfiddle.net/8tp4bxh9/2/
.jacket {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
min-width: 246px;
min-height: 150px;
padding-top: 55.313%;
}
If I was making the .jacket width smaller, I would be using,
width: 50%;
or max-width: 50%; ?
.jacket {
position: absolute;
top: 0;
left: 0;
right: 0;
padding-top: 55.313%;
}
If you make the jacket smaller it won’t cover your video will it?
You already have 100% width with left:- and right:0. If you add width:100% then that is superfluous.
It is possible to add width to absolute elements that are already defined by left and right co-ordinates and if the width is less than that defined by the co-ordinates the width or max-width will be honoured and the box created will be the dimension supplied by the width (or max-width). (The area covered by the co-ordinates may however in some cases still mask content underneath).
Thereforw if you are giving a physical width to an absolute element then don’t use both left and right co-ordinates at the same time unless you want the box centred within those co-ordinates when using margin:auto.
Details are important as always 
Leave the cover at 50% and when it’s clicked on, let it expand.
Try it and see
It would be written like this then.
https://jsfiddle.net/za2xsv9u/3/
.jacket {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
max-width: 56.72%;
min-width: 148px;
min-height: 148px;
padding-top: 55.782%;
}
The min-height probably isn’t doing anything and the min-width only clicks in at very small widths.
I would leave them out. The padding-top creates the height in relation to its width anyway.
It’s a bit weird because originally it was to match the video hence the aspect ratio padding but now you are not doing that so some things may not be required and is a matter of testing and seeing what happens…
With min-height removed it turns into a rectangle.
Not if you remove the min-width also. There are no devices less than 148px wide (none that you care about anyway).
Neither min or max are needed.
As I keep saying its the aspect ratio padding that maintains the height.
So, what you are saying is, it doesn’t need a stop point to where it doesn’t get squished together.
Like this.
Does anyone have a browser that is 100px wide?
The smallest phone is 320px wide so it seems odd to worry about less than that unless you are squishing it into a small space. If so then re-instate the format you had.
This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.