Fixed (But Responsive) Aspect Ratio DIVs On Oxygen Builder

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):

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.

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