Fixed (But Responsive) Aspect Ratio DIVs On Oxygen Builder

Published: 9 months ago

This quick and simple tutorial is going to show you how to make divs in an Oxygen Builder website have a fixed ratio. What that means is that the aspect ratio remains the same as the width and height change depending on the screen size. For example, an aspect ratio of 1 to one would be a square. The div would remain a square, regardless of the screen size or width. It does this by dynamically changing its height and width.

This is incredibly helpful if you are populating divs with background images that have an aspect ratio, want to limit your CLS, or just need fixed aspect ratio elements in your oxygen website. The coolest thing about this is that it uses data attributes to specify the aspect ratio. You can easily change them, and the feature is available globally after installing the CSS stylesheet.

Here are two examples of the fixed aspect ratio of a div element in an Oxygen Builder website. Resize the screen and notice how the ratio remains (though it's set to stop if the content within needs more room):

Demo Square Div - Change The Screen Size

Image is 1600px by 900px

Video Tutorial

We have a complete written tutorial with screenshots below, but if you are a more visual learner, here's a video tutorial that automatically loads to the timestamp where we discuss adding fixed aspect ratio responsive divs in Oxygen Builder.

Like this content? Subscribe to our channel!

Why Should I Care?

The primary thing that I use this method for is making responsive square elements. Without this method, it's very difficult (even impossible) to achieve this while still being responsive to the changing widths of the parent container and screen size.

Real world applications of Oxygen Builder divs having aspect ratios but remaining responsive to the actual screen size could include:

  • wrapping slow loading images, videos, and iFrames that are responsive with standard aspect ratios in this style of divs container, eliminating cumulative layout shift.
  • wrapping photography with a div that has a corresponding
  • aspect ratio (many photos taken by DSLRs have a 4:3 ratio).
  • dynamically populating divs with background images for blog repeater elements, while keeping them at a standard square ratio.

Expanding on the bullet above, by having standard aspect ratios for your archive pages, where there are many individual cards containing featured images and text, you get a very uniform and clean look on any screen width and device.

The method outlined in this tutorial is the easiest that I've found, and allows you to quickly and easily globally apply standard aspect ratios in the Oxygen Builder using a simple data attribute. Let's get right into the tutorial where we will introduce the code, discuss how it works, and show you how to add it to the Oxygen Builder.

The Code

[style*="--aspect-ratio"] > :first-child {
  width: 100%;
}
[style*="--aspect-ratio"] > img {  
  height: auto;
} 
@supports (--custom:property) {
  [style*="--aspect-ratio"] {
    position: relative;
  }
  [style*="--aspect-ratio"]::before {
    content: "";
    display: block;
    padding-bottom: calc(100% / (var(--aspect-ratio)));
  }  
  [style*="--aspect-ratio"] > :first-child {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
  }  
}

Source: https://css-tricks.com/aspect-ratio-boxes/

If you would like the complete explanation on how this code actually works, feel free to read this article:

How To Install/Use On Oxygen Builder

This is standard CSS code so copy and paste from this website directly into a stylesheet in the Oxygen Builder. You can also use Advanced Scripts to insert it into your website.

Then, create a div, and give it a width of 100%. Remember, this is responsive, so we will not be using pixels for any of these elements.

Now, the final step is applying a data attribute. Go to the advanced tab, scroll all the way down, and click on attributes. Add a single attribute with the following information.

Name= β€œstyle”
Data= β€œ--aspect-ratio:1/1;”

Once you've entered the necessary text, click apply attribute, and your div will now have an aspect ratio that doesn't change even as the screen size does.

Change the aspect ratio to anything that you want. The example above gives you a square responsive give in the Oxygen Builder. Here are a few aspect ratios that you can use:

Also because it's calculated, you can do this too:

Data= β€œ--aspect-ratio:1.5;” - same as 3:2
Data= β€œ--aspect-ratio:3523/2811;” - direct match to pixels

Like this content? Subscribe to our channel!

Join Our Newsletter
Here's what you get: A once a week newsletter that contains original content, aggregated posts, WordPress deals, and anything else we think you'd like. We don't spam or sell your email address. Unsub at any time.
Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tim Hill
6 months ago

This was a really helpful article. I'm currently working through steps to address the upcoming Core Web Vital changes and the bullet about CLS caught my attention. I'd love to see an article on how you are using Oxygen to meet those upcoming changes. I haven't seen many blogs dedicated to Oxygen either that aren't just a review. It's nice to see some content on what's really possible.

Etienne Mansard
Etienne Mansard
29 days ago

Hello, thanks for this tutorial! I have an issue: I want my div to keep it's aspect ratio but everything inside that div is also inherited the aspect ratio which I don't want. Also, I cannot center the elements inside the div. Any help would be appreciated!

IsoGroup- Web Dev/Design, WordPress and More

Affiliate Disclosure: Some links on this website are affiliate links. We make commissions for purchases made through those links.

We only recommend items/tools that we've personally used and like.

Full Disclosure | FTC Statement

Join Our Newsletter
Over 4,000 Design Lovers and Problem Solvers.

Author

A relationship driven website creation company.

Connect

Β© ISOTROPIC, LLC 2016-2021
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram