A lot of the time when you design a website for you or your client, you’re (out of habit and rightly so) focused on making your design look good on desktop computers. But when you scale down that beautiful home page image with text over it onto a mobile phone, things can start looking a bit…wonky.
In this post we’ll show you how to fix this issue on mobile devices by replacing the background image on a row with a background color.
The problem is the image gets cropped on small devices
Firstly, let’s identify the problem. We create a new Beaver Builder row which takes up the full height of our browser window. It’s simple and the image does all the talking. We’ve spent years searching high and low for this image in our favourite stock library, or maybe we’ve been hassling our client for weeks, begging them even, to please send us an image we can work with.
And finally, we get the image. It’s beautiful.
But on mobile devices, the background image just doesn’t work.
No longer are the days where it is 50/50 as to whether the client will notice this issue. Mobile phones usage has surpassed desktop usage. We need to fix this! And fast! So we can get back to learning how to set up a Beaver Builder blog the right way!
Replacing the background image with a background color on mobile devices might be just the solution you’re looking for
Step 1: Launch the Page Builder
To replace the background image on the Beaver Builder row with a color, edit the page by launching the Page Builder.
Step 2: Add a background color to the row
While in the Page Builder editing the page, edit the row you want to remove the background image on and set a background color.
To do this, under Background> Type select Photo, as shown below.
Once you select Type: Photo you can add your background image AND you can also set a background color further down the page, like in the below screenshot where I have added the background image of the girl, but then also set a green background color.
To explain this further, in CSS when you set a background image AND color on the same element, the image actually sits ON TOP of the background color. So the background color is always applied, but the image sits on top of the background color so you just don’t see it. Think of one layer on top of another. Like mums lasagne!
TIP! You should always set a background color when also setting a background image, just in the off chance the person viewing your website has set their browser set to not download images. Although unlikely, it can still happen!
Step 3: Add a CSS class to the Beaver Builder row
While in the Page Builder editing the page, edit the row you want to remove the background image on, then click on the Advanced tab and add a CSS class in the CSS Selectors > Class text field, as per below.
To make this tutorial easy, we suggest you add the CSS class bg-color-mobile to the row, like we have done below.
Step 4: Add the necessary CSS to hide the row background image on mobile devices
Building on what we learnt above, as the background image sits over the top of the background color, if we remove the background image then the background color underneath will show.
That’s what we’re about to do – the magic!
Add this CSS into your style.css file in your theme, or wherever else you prefer to add your CSS code.
View the row on a mobile device and you’ll see that the background image now hides itself and the underlying background color shows through, making your content easy-to-read and your website not look like an accident.
And this isn’t Harry Potter. You’ve now got the ability to hide Beaver builder row background images on small devices whenever you want!
Share your examples in the comments below
We’d love for you to showcase where you use this technique. As Beyonders, we all value inspiration, and above all, how cool would it be if you inspired someone else with your work!
Share in the comments below and inspire today!