[resolved] Alternate header image for mobile (3 posts)

  1. bluesinlondon
    Posted 3 years 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.

  2. paulwpxp
    Font hero
    Posted 3 years ago #

    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.

  3. bluesinlondon
    Posted 3 years ago #

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

Topic Closed

This topic has been closed to new replies.

About this Theme

About this Topic


No tags yet.