Alternate header image for mobile

  • Resolved bluesinlondon

    (@bluesinlondon)


    11 years, 9 months ago

    Reddle requires the header image to be a specific width – 1120… If I design so it looks right for desktop, when scaled do for mobile the graphics are too small, and vice-versa.

    How can I specify an aternate version for mobile?

    Thanks in advance.

Viewing 2 replies - 1 through 2 (of 2 total)

  • This works for me, at least in Firefox tested using official demo site over at WP.COM ( because the demo at WP.org doesn’t have header image for me to test on live ).

    @media (max-width: 450px) {

	#masthead a[rel="home"] {
		display: block;
		overflow: hidden;
		background-image: url("https://dummyimage.com/320x72/ff0000/fff.png");
		background-position: center center;
		background-repeat: no-repeat;
		background-attachment: scroll;
		background-size: cover;
	}

	/* reset because there is no other way to target the above */
	#masthead #site-title a[rel="home"] { background: none; }

	/* remove visibility but keep the dimension for the above */
	#masthead img { visibility: hidden; }
}

    Replace the url to header image for small screen.

    This code must be used in childtheme’s stylesheet, or in Custom CSS plugin.

    Thread Starter bluesinlondon

    (@bluesinlondon)

    That’s great. Thanks so much for taking the time to help out!

Viewing 2 replies - 1 through 2 (of 2 total)
  • The topic ‘Alternate header image for mobile’ is closed to new replies.