Hello,
I viewed the page you need help with, and the text for the phone number is white and not dark blue when I view it on mobile. However, the text looks like it is in an Advanced Text block. The Advanced Text block offers a feature in which you can highlight text color and background. Using the block’s toolbar ribbon, select “More” and find the text highlight option. Here is a screenshot for reference. This method will change the text color for the block; however, it will affect the text on all screens. You can try using a Conditional Display to show the block only on mobile devices and create an additional block that only displays on a desktop if you want different colors for different screen sizes. Besides this method, you can edit your block’s HTML to include a span with a class in which you apply styles using a media query to target the screen size.
Thank you very much as always for your help Gilbert, God bless you!
This part is very technical for me so I will need some time to try to fully comprehend all you’ve written above 🙂
BTW, there wasn’t a screenshot attached in your post?
Hi Mike,
You can place your existing Advanced Text block within a Section block and then duplicate it to have two versions of that heading.
1. Hide the first Section (desktop version) on tablet and mobile via Section > Visibility Settings.
2. Hide the second Section (mobile version) on desktop.
3. Change the font colors of the headings on desktop and mobile versions to your liking.
Here’s a screen recording:
https://share.getcloudapp.com/p9uQDzq6
I hope this helps and let us know if you need further assistance.
