WordPress and SEO Supported Training -> Helping you get your WordPress website started the right way!

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

 

Conclusion

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

 

SHARING IS CARING

If you have enjoyed this article and found value in it, please consider sharing it with someone who would benefit it. Not only will it help them but it will help me too. Thank you. 

DON'T FORGET TO SUBSCRIBE TO THE BLOG!

Share This