How to make design tweaks so your website looks good on mobile

by | Dec 19, 2019 | Divi, Build & Maintain, Websites

If you have spent a while making your website look good on a desktop, you may be disappointed to see that when you view it on a mobile it looks a bit or the text is blending in too much with parts of an image.

Whatever the reason, you know you need to make some design tweaks.

This blog post will show you how to fix some of the common mobile issues you may find when building your site with the Divi theme.

Problem: Text is blending in with the image so you can’t see the text

text is blending in with the image and can't be seen


In this example the text is blending into the coffee cup and can’t be seen very well.

To make the text stand out we just need to give is a white background when the page is viewed on mobile or tablet.

To do this open the Divi visual editor.

Open the text block settings.

Under the ‘Content’ tab, open the ‘Background’ settings.

Click on the mobile phone icon to open the mobile settings. You will see ‘Desktop,Tablet and Mobile’ tabs.

Click on the ‘Phone’ tab.

Click on the paint pot icon to set the background colour. I selected white for this example.

Set the transparency so the white becomes see through. If you can’t see the transparency settings you will have to click on the cog to open up the transparency settings.

Click on the green tick to save.

Click on the ‘Tablet’ tab and repeat the settings. Don’t forget to click on save.

You can format the text further if you wish, e.g. you can centre the text or change the size.


change mobile settings for text background colour



If you are struggling with any other mobile issues, let me know and I will include the fix here for you.



Submit a Comment

Your email address will not be published. Required fields are marked *