Centering Content

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.