I am editing a website for someone so the mobile version works and functions. This is the colour scheme the person has chosen and it works on the desktop version because the text is in the white sections however on mobile it becomes hard to read. Does anyone have any suggestions or advice they can give me to make it easier to read?
without seeing the desktop version it is hard to give advice. But bottom line is you’ll need your design to be responsive and potentially make changes for mobile in your CSS, whether that means removing the photo, shifting the layout, etc.
Are you saying the text does not flow over the image on desktop displays, but does flow over it on smaller, mobile devices?
There is no good way to make text legible when the background image ranges from dark gray to white. The closest you can come is a text color halfway between, which won’t look good.
Unfortunately, the solution is a media query that pays attention to screen width and directs the browser to shift the text to below the image when the pixel width of the screen is fewer than a specified number of pixels. That’s really the primary means of making a responsive site that reconfigures it’s layout to conform to various screen resolutions. You could probably accomplish the same thing with divs that have minimum widths and that automatically stack themselves when the space gets too tight.
It’s way beyond the scope of this forum to tell you how to do any of that, and if you’re using a drag-and-drop template, it might not even be possible due to the limitations of the template. Easily readable text over that image is a non-starter, but if you must, try the hex color #bb6666 or just #b66, which is about as close as you’re going to get at being readable on both backgrounds.