Possibly Outdated Content

This content was written a while ago and may no longer be accurate, but remains here for reference purposes.

The Recipe

This challenge came from a couple of questions in the Facebook group.

  • How do I center a 1/2 column on desktop and have it be full width on smaller screens?
  • How do I keep an image focal point correct on mobile?

The key to the first question is to upgrade to version 7+ and turn off legacy mode either globally or at the page level. Once those two are in place, the flex features allow you to do many things that were cumbersome in previous versions. Note moving to CSS Grid would be better (less code required), but this solution is still relevant.

The Recipe for Centering Content

  1. In the container
    1. Set Column Alignment to center (if you want the column in the vertical center)
    2. Set Column Justification to center (if you want the column in the horizontal center)

Add a 1/2 column

  1. Using the responsive design features, switch to medium (tablet) and set the column to be 1/1 or something different.
  2. By default small (mobile) layout is 1/1, so you don’t have to change or click anything, but I do just in case something changes later.

Part 2 – Background Image Alignment

This next part stems from a user with an image where the person was on the left side of the container on the desktop, which was the look they wanted, but when the screen size was reduced, the person essentially disappeared. The solution is simple and requires you to keep in mind that when you set a background image in Avada, the default is to center the image both vertically and horizontally (center center) using the background size of cover ( I submitted a feature request to allow us to choose the size – cover, contain, custom). The solution, in this case, was to change the alignment to the bottom, left. This may not work in all cases, and some experimentation may need to be done. Using custom CSS could also be the only viable solution. I suspect more responsive design features will be added in the future.

Originally published on Sept. 15, 2020

In this story

Man crouched next to a video camera, shooting in a dark spaceYouTube® Video Parameters
Shooting starThe Events Calendar Widget

Leave a Reply

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

RELATED ARTICLES

  • 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 Adding Dynamic Data to a Toggle

    Adding Dynamic Data to a Toggle

    Adding dynamic data to a toggle in Avada is easier than you think.

    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 CSS Play Button + Lightbox

    I recently migrated this page over to the new site and wanted to make sure you could find it.

    October 11, 2021

  • Read Extending Beyond the Page Width

    A question was posted on the Theme Fusion forum about extending an image beyond the page width without using the full-width layout.

    April 11, 2021

  • Read Avada Challenge – CV Page

    A Facebook user asked if it would be possible to create a popular CV template using Avada.

    March 14, 2021