Nice Brian. I created an almost identical stylesheet for this a while ago. As part of it I created a custom class .alt-ratio (alternate ratio) that included media queries to change the aspect ratio at certain breakpoints. For example if one had a very tall ar on the desktop ( eg 9/16) which took up a heck of a lot of vertical screen real estate on mobile, it would change accordingly to say square... .alt-ratio img { aspect-ratio: 9/16; object-fit: cover; object-position: center center; } @media (max-width: 1024px) { .alt-ratio img { aspect-ratio: 2/3;} } @media (max-width: 767px) { .alt-ratio img { aspect-ratio: 1/1;} }
This is perfect, and exactly how I roll. We should compare notes! Chris and I have been building up handy snippets like this in WPCode. It's like a mini Bootstrap library for Elementor.
Hello there! If you apply !important to each CSS rule, does manually setting a height value that exceeds the aspect ratio threshold still override them?
I just tested it and the height can still overrule even !important. I think setting a width is probably the more likely need than a height when using a ratio anyway. If setting a height is the priority, then a ratio may not be.
@@KingGrizzly Nice to know. Just made a little research on why is that so, and found out the following on the MDN website: "At least one of the box's sizes needs to be automatic in order for aspect-ratio to have any effect. If neither the width nor height is an automatic size, then the provided aspect ratio has no effect on the box's preferred sizes." So, since width is never on "auto" in Elementor, when you set a height value, the set aspect-ratio is rendered invalid.
@@KingGrizzly And I just watched another video from Kevin Powell on that topic about flex alignment, is shows another good reason for using grid instead of flex when the main purpose is alignment. If you're still looking for more info on this question, the video is named as "Why I use grid over flexbox for this common layout" and is from 2022, it might contribute to the matter
Thank you, this is super! I copied your code and pasted it into: Dashboard > Elementor > Custom Code > (I made a new snippet)... When I save it I get the errors "Unknown property 'aspect-ratio'"... could you perhaps tell me what I've done wrong? I have used "head" and kept the code wrapped in the tags.
The syntax warnings in Elementor can safely be ignored. The snippet should work. Please let me know if it doesn't actually save. The reason the warning happens could be Elementor using an older "linter" to check the CSS or it is in a strict mode and warns about newer properties like "aspect-ratio". Rest assured, this should be well-supported! So, if it saves - you should be all set!
Hi Brian @@KingGrizzly thanks very much for the confirmation! I can't tell you how much I've struggled with aspect ratios. Hours of my life! :) Thanks so much.
@@michellepace Oh, good! I'm trying to find some time to put together a video on easier layout controls with the Elementor grid container and some "helper" classes. You might appreciate that when it comes out too. Have a good week.
Very useful tips. Thanks for sharing.
Very glad this was useful. Thanks for watching! Have a good week.
@@KingGrizzly Thanks, Brian. Have a good week to you too 😊
Nice Brian. I created an almost identical stylesheet for this a while ago. As part of it I created a custom class .alt-ratio (alternate ratio) that included media queries to change the aspect ratio at certain breakpoints. For example if one had a very tall ar on the desktop ( eg 9/16) which took up a heck of a lot of vertical screen real estate on mobile, it would change accordingly to say square...
.alt-ratio img {
aspect-ratio: 9/16;
object-fit: cover;
object-position: center center;
}
@media (max-width: 1024px) {
.alt-ratio img {
aspect-ratio: 2/3;}
}
@media (max-width: 767px) {
.alt-ratio img {
aspect-ratio: 1/1;}
}
This is perfect, and exactly how I roll. We should compare notes! Chris and I have been building up handy snippets like this in WPCode. It's like a mini Bootstrap library for Elementor.
@@KingGrizzly This would be really helpful. Could you consider doing a walkthrough tutorial on this? Probably point us to where the code is?
@@rodlivz You mean the Bootstrap-like approach? I'd be happy to put together a video if interested!
@@KingGrizzly Yes please
Thanks a mil, this helped me a LOT !!!
Me too! It makes building that much more enjoyable. Happy web designing!
Hello there!
If you apply !important to each CSS rule, does manually setting a height value that exceeds the aspect ratio threshold still override them?
I just tested it and the height can still overrule even !important. I think setting a width is probably the more likely need than a height when using a ratio anyway.
If setting a height is the priority, then a ratio may not be.
@@KingGrizzly Nice to know. Just made a little research on why is that so, and found out the following on the MDN website:
"At least one of the box's sizes needs to be automatic in order for aspect-ratio to have any effect. If neither the width nor height is an automatic size, then the provided aspect ratio has no effect on the box's preferred sizes."
So, since width is never on "auto" in Elementor, when you set a height value, the set aspect-ratio is rendered invalid.
@@KingGrizzly And I just watched another video from Kevin Powell on that topic about flex alignment, is shows another good reason for using grid instead of flex when the main purpose is alignment.
If you're still looking for more info on this question, the video is named as "Why I use grid over flexbox for this common layout" and is from 2022, it might contribute to the matter
Thank you, this is super! I copied your code and pasted it into: Dashboard > Elementor > Custom Code > (I made a new snippet)... When I save it I get the errors "Unknown property 'aspect-ratio'"... could you perhaps tell me what I've done wrong? I have used "head" and kept the code wrapped in the tags.
The syntax warnings in Elementor can safely be ignored. The snippet should work. Please let me know if it doesn't actually save.
The reason the warning happens could be Elementor using an older "linter" to check the CSS or it is in a strict mode and warns about newer properties like "aspect-ratio". Rest assured, this should be well-supported!
So, if it saves - you should be all set!
Hi Brian @@KingGrizzly thanks very much for the confirmation! I can't tell you how much I've struggled with aspect ratios. Hours of my life! :) Thanks so much.
@@michellepace Oh, good!
I'm trying to find some time to put together a video on easier layout controls with the Elementor grid container and some "helper" classes. You might appreciate that when it comes out too. Have a good week.
Super thank you