Content and menu backgrounds disappear on mobile

Since I’m using Storefront, I’m copy/pasting my post from another forum section here, as recommended by the moderator:

I finally got my site a little closer to where I want it. I’m still tweaking the colors and layout of the site as I learn CSS better. If I beat out all the kinks I’ll start doing more creative stuff with the layout and coding, but for now I’m trying to get it to just WORK with a few custom colors and margins.

What I altered was each page’s code to make all table cells have a transparent background. This was the only way I could find to get rid of the default solid black background they had previously. By assigning transparent backgrounds for each table cell (that was the only thing that worked), it allowed the background colors as defined in the style.css coding to be seen behind the page’s content.

In the style.css code, I changed the background command on the .content-area, .right-sidebar .widget-area, .site-footer, and .site-header to “background-color:hsla(x,x,x,x)”. For the footer I had to add !important to get it to change color. I didn’t add or delete any coding, I just changed the color language there.

If I chose to do it the other way around and create my semi-transparent background colors via each table and instead asked the content areas to be transparent, it would leave my blog and shop without any backgrounds since there is no custom tables there.

But I have a problem, and I’m not sure if it existed before changing the colors. I don’t have a smart phone so I rarely remember to check the site on a mobile device. I did so today, and those semi-transparent backgrounds disappear on mobile, leaving my white text ilegible on a busy background image. The default menu background colors also disappear, which is not something I have altered in any coding. The custom sticky menu I added via plugin works, but the default WP menu has no color behind the menu options on mobile.

I tried switching all my custom bg colors to rgba just now (darn it, I had it right where I wanted it in hsla), just in case hsla isn’t supported on mobile or something. Frankly I’d never heard of hsla before today (can you tell I learned coding 20 years ago?). But I still have no backgrounds on mobile, so that’s not it 🙁 Besides, it doesn’t explain why mobile menu has no background…

Ideas on how to force a background for mobile content and menus?

Also, am I allowed to combine two questions in one post? How the heck do I get rid of the massive gap between my header and body?! I managed to reduce it on a few pages by altering the margins in the page code, but I can’t access page coding for all pages (blog, shop, etc).

• This topic was modified 3 years ago by pinecones.
• This topic was modified 3 years ago by pinecones.

The page I need help with: [log in to see the link]