2 Ways to Create Aspect Ratios in Webflow
HTML-код
- Опубликовано: 5 авг 2024
- - ABOUT -
We'll cover two ways to create aspect ratios in Webflow. One is the "padding hack", which can be done using all native Webflow styles. The other is the relatively new "aspect-ratio" CSS property. It's not in Webflow yet, but we can add it in an HTML embed element and see it right in the designer.
- CHAPTERS -
Intro | 00:00
Styling the Padding Hack | 02:10
The Padding Hack and Responsiveness | 10:10
Pros and Cons fo the Padding Hack | 11:19
Styling with "aspect-ratio" | 13:28
-- LINKS --
Mozilla Article
developer.mozilla.org/en-US/d...
Can I use Link:
caniuse.com/?search=aspect-ratio
Staging URL:
jocando-tutorials.webflow.io/...
Read only Preview Link:
preview.webflow.com/preview/j...
-- SKILLSHARE --
If you're a beginner or intermediate user, check out my Skillshare class: "Webflow for Beginners." Together, we create a simple one page portfolio website for a photographer, starting with the assumption you don't have any experience with HTML, CSS, or Webflow. Use the link below to get 2 months of Skillshare for free.
skl.sh/2PU9tML
All Tutorials:
jocando-tutorials.webflow.io/
- ABOUT ME -
Serve - My Creative Studio’s Site
www.madebyserve.com/
Dribbble
dribbble.com/Jose_Ocando
Twitter
/ jaocando
You're a phenomenal teacher, Jose. Hope we get a lot more videos from you :)
If I had watched this video a month ago, I would've had a job at a nice agency now, but nevertheless, an awesome, awesome video, Jose. I'll be checking out all of your videos and I have no doubt it'll up my game!
Yay!! Another great video :) Thank you!!
Awesome tutorial. Thank you Jose!
Awesome video Jose!
AWESOME WORK. thank you for explaining a lot out there.
Thank you so much for this Jose!
Thank you Jose! This is super useful!
Like always great and very well explained... Thanks Jose
Thank you so much for this tutorial! You have saved me so much time! I feel like dashing you money😁
Thanks Jose, this was super helpful!
Thank you! such a great tuts!
You are a lifesaver thank you!
Thank you so so much! it was extremely helpful :)
Awesome explanation and troubleshooting all the possible things that might go wrong. Great teaching there sir. Hats off ♥
I'm only 1:40 seconds into the video and I've already smashed the like button. I dived in deep on a huge web project and this was something that just boggled my mind when I'm looking at how my cards are responding in different screen sizes! Thank you for this!
You’re crushing it with these!
Like tomatoes in a can.
Very helpful. I used the padding hack before, but set the image as the background to the div. Works fine that way too.
That works but then Webflow doesn't optimize the images for different screen resolutions, unfortunately.
ya channel is gold!
🔥🔥🔥🔥
You're killing it with these tutorials, Jose 💪🏼. I would love to see a future tutorial on images that are outside the layout max width, and are more relative to the browser. For example, how would you make an image not resize and keep it's position regardless of the browser size, I've had that use-case a couple of times and i got it to work, but I'm sure there are better ways.
Oh interesting. Could you link to that example? I think I know what you mean but not 100% sure.
@@JoseOcandoVideos An example i can think of is on the website apple, on the landing page for iPhone SE (can't post links in the comment section as it'll get instantly removed). If you scroll down to the section with the title "Built for IOS 13. Any Beyond" you'll notice that if you resize the browser, the phone screens are only partially responsive, at some point, they start to get cropped, when the width of the screen gets tighter. Hopefully that makes sense 😁
Having no idea what the date is...Sign of happiness and contentment. I hope.
I was about a whole week off 😂
@@JoseOcandoVideos I know! 😂 Briliant.
Strangely I tried this on a collection list div to make it square relative to the width and it didn't work. Any ideas?
I needed this 1 year ago haha. This was really helpful Jose, thank you for the tut!
I have a question about rounded corners. Is there a way to round the corners like Apple does it with their UI? For example Figma has a feature to additionally smoothen the curve of the corner radius. It would be so nice to achieve that look in Webflow, natively or even using custom code.
Oh good question. On the smooth rounding, I don't think there's a native way to do that, but maybe with clip-path?
damn, this was fucking impressive
This is working perfectly for images, but how would you do this for a map object?
In terms of web dev - is using Z-index not a more traditional and perhaps better way to make text on top of an image?
Hi, for some reason, it doesn't work for me, it behaves according to the size of another element, and I don't understand exactly which one,
If you have an idea what exactly I didn't do right, I'd love to hear it.
Hey jose , can i send you something ?