I just uploaded my site to the server and some of the boxes on the page are not displaying the background color I have set for them. However, if I try using a different color sometimes the background color displays. Other times it does not. There doesn’t seem to be a pattern to why certain background colors display and others don’t.
The colors display fine when I preview the page in Elements or view the page on my local computer. I’ve attached 2 screenshots of the page section. The first is supposed to be a cream background, but as you can see, the background color of the container shows through the boxes instead. The second screenshot shows what happens when I change just the background color and nothing else. In this case I chose a green and a burgundy color.
I don’t understand this behavior at all. Why should it matter what color I’ve chosen for the background? I’ve tried plain white, plain black and other variations of colors I’ve created for my site. White and black don’t work at all. Variations of the burgundy and green don’t work. I also have a blue color I use. A light version of that works, but not the darker variant. As I said, there is no pattern.
Have you tried switching the browser from Light to Dark mode to see how that affects the colors? You could also try this in Elements using the Light/Dark controls.
I’m wondering if it’s the html/jotform you have on the page causing issues, can you try removing that and republishing to see if it fixes the issue.
You could also try copy and pasting those elements to a test page and see if they look fine when published, if they do look okay, then you know it’s something else on your page causing the issue…
First, I created a test page and removed the JotForm code. That seemed to fix the issue. However, when I remove the code from the Home page, it still isn’t displaying the background color. I also noticed some of the formatting of the headings is different on the home page, so it’s also not rendering those preferences either.
Sounds like an html syntax issue… do you have any custom SVG’s on the page?
I would also try removing a section at a time on the page until the issue disappears, this is a great way of tracking down what’s causing the problem. Perhaps start with the menubar…
I don’t have any custom SVG’s on the page.
I did some testing and removed some sections of the page. That had no effect.
Here’s the strange part. The test page is an exact copy of the original home page. That one worked fine. Background colors and formatting all there. So I figured, I’ll just make that the home page. Before I did that, I put the JotForm code back in to see if it affected the background colors. There were no issues and the page worked fine. But then, I deleted the home page and made the test page the home page and now the background color disappeared.
If it was an HTML syntax issue, I can’t see how it would have worked when the page was test-page/index.html and now doesn’t work when the page is in the root directory as index.html. I just don’t get it. How can the same exact code work differently based on how the page is named?
Thanks in advance for any other thoughts you have.
Hi @workwithamyc
honestly I haven’t fully understood what happened with removing the form and changing file names.
I had a look at your last uploaded file and there is on my computer a mismatch for dark and light mode. When I toggle in Elements from light to dark mode I see a difference.
Not sure why you are seeing something different in dark mode. I am not seeing that on my end. And I have Dark Mode disabled for the website. I haven’t been able to figure out how that works yet, so until I have time to look at tutorials on settings for Light Mode and Dark Mode, I just have it disabled.
I worked on the issue background color issue with ChatGPT. It suggested to re-upload the entire site as there may have been some issues with styles not being updated when individual pages were uploaded. After I did that, everything is working fine and the format on both pages is identical.
