Background image not displaying correctly on the (Mobile Side)

Many times background images that look amazing on the dekstop-side may not look as great on the mobile-side in the page editor. Here's an easy way to fix that.

Watch Video:  https://www.loom.com/share/b66ff85f22e94b4e85017dcf34aadbaa

Video Recap: 
When you run into this issue where you may have a background image that does not align as desired on the mobile-side in the page editor, you may want to have two separate sections. One for the desktop-side and one for the mobile-side. 

Having individual sections will allow you to make any changes required to achieve your desired look without the risk of affecting the other side and potentially damaging your work. 

How to Set a Section to Desktop-Only
Hover over the section until it turns green and shows its settings menu. Click on the Settings (gear icon) and select the desktop icon as seen here: https://d.pr/qsmFLt. Click Save when done.


How to Add a New Section
An easy way to add a new section is by hovering towards the bottom of an existing one and clicking the green + sign: https://d.pr/BfD8zk. 



How to Set a Section to Mobile-Only
Hover over the section until it turns green and shows its settings menu. Click on the Settings (gear icon) and select the mobile icon. In this section, you will be able to add the background image you desire so it matches the desktop side as such: https://d.pr/jDISPm. Click Save when done. 



Tip: On some occasions, adding text over a background image may not achieve the appearance you are looking for that matches the desktop side. In this case, you may want to add the text to the image itself in an image editor such as Funnel Images and then upload the image already with the text you desire. You can also preview the desktop side, take a screenshot of it and upload that screenshot as the background image already containing the desired text.