Twenty Twelve transparent background turns white on mobile

I do not know for certain, but this might help you sort that out:
https://www.ads-software.com/support/topic/error-with-changing-background-to-white-on-twenty-twelve?replies=4#post-3792830

It kind of makes sense, but not quite. I’ll try to keep messing with it. Not looking good though.

I would ‘settle’ for a background color based upon min width if it got rid of the white even.

Not the best method, but a quick fix for you would be to add CSS styles you have applied to the body to the #page div.

Instead of this:

body.custom-background {
  background-attachment: fixed;
  background-color: #22140B;
  background-image: url("https://mrpixels.com/wp-content/uploads/2014/02/background-1600.jpg");
  background-position: center top;
  background-repeat: no-repeat;
}

Try this:

body.custom-background,
#page {
background: url("https://mrpixels.com/wp-content/uploads/2014/02/background-1600.jpg") no-repeat center top #22140b fixed; }

Sorry, I was assuming you were familiar with editing your theme files directly with the previous suggestion.

Hi Middev,

I’m not sure how it is different, but it looks cleaner. I did this by removing the background from appearance and then use the CSS. It still turns white when narrowed down yet though.

It also turned white when there was no background at all. I checked it in between changing the CSS.

See if this will work… just simplify it to:

#page { background: #22140b; }

Leave your background image and color set in Appearance.

I think I found your problem. In your styles.css file (line 524) you have:

.site {
    background-color: #FFFFFF;
    padding: 0 1.71429rem;
}

The background-color is applying when you resize to mobile widths. Remove that background color. You should then be able to ignore my previous suggestions and the background you set in Appearance to work.

I will try that, but want to comment that I have been doing some redneck editing. (Basically deleting one pieceof code at a time and seeing what happens. I discovered that this is the clip that cause the body to turn white when it is smaller.

/* center nav bar with header and top and bottom borders */
@media screen and (min-width: 600px) {
	.main-navigation ul.nav-menu,
	.main-navigation div.nav-menu > ul {
		border-bottom: none;
		border-top: none;
		display: inline-block !important;
		text-align: center;
		width: 100%;
}

I do not know why. Just that this isolated the problem.

On a side note, (if you are not already) you should be doing these edits withing a child theme so that you will not loose all your edits when an update for the theme comes along. View https://codex.www.ads-software.com/Child_Themes for details, it’s a fairly simple process to set up or you can let a plugin do if for you https://www.ads-software.com/plugins/one-click-child-theme/

I use a child theme all the time.

I actually made a wordpress site last night and added one piece of code at a time to isolate the issue.

It is coming from my last code snippet I posted. I will start playing with that next.

I simplified the css to /* Center navigation */

.main-navigation ul.nav-menu {
 text-align: center;
}

and now it works. Thanks for your help.`