For the heroes above and below, make the layouts work on mobile. The first hero has the image added as its own element while the second hero has the image baked directly into the background. Both of these methods have their own use cases, so neither is better than the other. It is good to have an idea of how you can adapt either of these designs to mobile. 

For this exercise, we’ll have the hero above stack, but note that you could hide the image column instead to only have the background with no image. Or alternatively you could have a hidden column that shows only for mobile that contains a different image to display on mobile.

For the hero above, there’s a point near Flatsome’s tablet size where it no longer fits on the screen well. Use custom CSS media queries to make it break sooner into a stacked layout. 

For the hero below, think of some different solutions try to resolve mobile with the simplest solution (no code, only builder). Once you figure out a simple solution, try another one where you replace the image completely on mobile with this image from the media library:

https://lemonadestandsandbox.lemonadestandsites.org/wp-content/uploads/2023/04/lemon-bg.jpg