The Challenge and Recipe

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

  • How do I center a 1/2 column in 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 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.
Interface showing settings described above

Part 2 – Background Image Alignment

This next part stems from a user that had an image where the person was on the left side of the container on 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, demonstrated below, was to change the alignment to 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.

Proin ante justo, ullamcorper ut faucibus eget, dapibus facilisis lacus. Aenean quis tellus posuere, ullamcorper libero ac, mollis ex. Vivamus varius semper semper. Quisque quis blandit nisi. Sed dignissim, nisi.