Hello all,
I am very new to WordPress and have just launched my first site using the platform a few days ago. I have been using a purchased custom theme and styling the pre-existing components within it to create the website so far, but I have encountered an issue.
The element at the top of my homepage uses a static image as the background. The image has a “light” side and a “dark” side where the left side of the image is an empty white space and the right side of the image is a person. I currently have two columns set up in a 1/4 – 3/4 ratio so that the text I display over the image appears in the white space with black font. This is fine for the desktop view. My issue is that the mobile view of the page displays the text over top the middle of the image which is a dark portion of the background image and the text is no longer easily readable (black text on dark background).
The header component does not seem to have options for specifically mobile view text color.
My question is basically to ask if anyone has recommendations for methods to go about fixing this?
I would be happy if I were able to disable the background image in mobile view, but I do not see how to do that. The optimal solution would obviously be to somehow add mobile responsiveness to the text displaying component using some sort of screen width identifier, but I do not know how to add custom CSS to the existing components.
I’ve also heard that making entirely new components would be somehow possible, but I am currently unsure of how to do that either.
This question is more general and directed at advice regarding solving this specific issue as well as perhaps suggestions involving the general troubleshooting process for the future when trying to make changes that don’t seem immediately supported by existing WordPress components.
Thanks!
[ad_2]