isotropic-2022
Share
Blog
Search
Menu

Fixed (But Responsive) Aspect Ratio DIVs On Oxygen Builder

By James LePage
 on January 7, 2021
Last modified on January 6th, 2022

Fixed (But Responsive) Aspect Ratio DIVs On Oxygen Builder

By James LePage
 on January 7, 2021
Last modified on January 6th, 2022

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!

Subscribe
Notify of
guest
2 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Tim Hill
10 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
4 months 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!

Article By
James LePage
Contributors/Editors
notloggedin
James LePage is the founder of Isotropic Design, a digital agency that builds WordPress websites. I read, write and design constantly!
We're looking for new authors. Explore Isotropic Jobs.
Close
🇺🇸 English
Save posts, access exclusive content, join members-only communities and more.
Dark Mode Toggle
linkedin facebook pinterest youtube rss twitter instagram facebook-blank rss-blank linkedin-blank pinterest youtube twitter instagram