I was watching a video on The Admin Bar (a great resource) about setting up GeneratePress, and Kyle Van Deusen was explaining how he always boxes his websites but in a way where they seem to be 100% wide for the average user. Doing this prevents images and other effects from spreading super wide on large screens. Basically, this is the “boxed” switch in Avada with a twist. In Avada, the box is set to your content width, so a lot of the expansive effects are lost (images and section separators). I was wondering how hard this would be in Avada, and as usual, it is not. Two style entries in your global styles and your set. I applied this to my site. The boxed width is now 2000px and the internal content width — set in the Avada options — is 1440px. I set a color (#252525) on the body to distinguish it from the page background color in Avada. The only anomaly I have seen so far is in the live editor, where section separators appear to go on forever, but they are constrained when viewing the website.

One note. If you fix the overflow issue related to Safari using sticky columns by setting the overflow to visible, the section separator (triangle) will escape the bounds of the #box-wrapper.

body{
  background-color:var(--awb-color7)!important;
}
#boxed-wrapper{
  width: 100%;
  margin-inline:auto;
  max-width: 2000px!important;
}

A quick video demonstrating the effect.

Originally published on July 30, 2022

An in-house setup for editing videos on a computerVideo Sizes
Test Layout - The Becker

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

RELATED ARTICLES

  • Read Customizing Post Pagination

    Customizing Post Pagination

    In this article, I show how CSS can be used to customize the Avada pagination element.

    February 20, 2023

  • Read Accordion Cards

    Accordion Cards

    Another custom accordion example using pseudo element.

    February 17, 2023

  • Read Moving away from builder settings

    Moving away from builder settings

    I am beginning to restructure my site to rely less and less on the Avada element settings in favor of site-wide styling.

    February 12, 2023

  • Read Horizontal Image Accordion

    Horizontal Image Accordion

    I just added a demo of an accordion-style image slider using nothing but Avada and some custom CSS.

    February 11, 2023

  • Read Styling the RankMath Sitemap

    Styling the RankMath Sitemap

    If you are a RankMath user, you may know that they recently introduced a feature that automatically generates an HTML version of the XML sitemap. This post is to share the CSS I am using to add some layout to an otherwise long list of links.

    December 11, 2022

  • Read Quick Tip: Faux Nested Columns

    Quick Tip: Faux Nested Columns

    Overcoming a shortcoming in Avada with some CSS.

    December 4, 2022