Limiting the page width

By Stephen Walker

Updated Dec. 18, 2022

38 words

Reading time: 0.2 min.

This CSS lets you box in Avada while maintaining the 100% width features.

Snippet

Add this to your global custom CSS or your preferred code snippet manager.

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

Originally published on Dec. 18, 2022

Styling the Avada Row

Fixed Width Submenu Icons

Avada, CSS, JavaScript
Fixed Floating Container
This creates a floating container. More to come.

Avada, CSS
Get your image to fill the space
This is a style I recently used on my blog post title bar to have the feature image fill the column without having to use a background image.
Avada, CSS
Table of Contents Border
I have seen some tables of contents around the web that use what appears as a left border, and the border color changes when highlighted. This feature is missing from the current version of Avada, so I created CSS styling to do this. It works best with a single-level list. […]
Avada
Social Sharing
The social sharing element has some styles that prevent stacking them in a column. This CSS will resolve this. Just assign the class to each instance.
Avada, CSS
RSS Feed
This gives the default RSS feed widget a more polished appearance.
Avada
Basic Toggle
The Toggle Element styling leaves a bit to be desired as it applies hover effects to the entire block and not just the header and the panel. This should override that behavior but still takes advantage of the settings, thanks to the use of CSS variables. Example