Support » Themes and Templates » Reddle » [Resolved] Alternate header image for mobile

[Resolved] Alternate header image for mobile

  • 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)
  • paulwpxp


    Font hero

    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("http://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.

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

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