Header Image on Mobile

  • Resolved Christian

    (@cantropo)


    4 years, 12 months ago

    Okay, i really like the seventeen theme but still i have some issues to take care of. My problem is that the header image on mobile devices is different on homepage (blog page) and other pages. on other pages the header image is fully shown, while on the blog page there is some responsive behavior of the header that cuts the image on both sides. i would appreciate that the header shows up like on the other pages of my website and even if you click on an article the header image is fine too…

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

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

  • I think this will get you what you’re looking for, add to Appearance->Customize->Additional CSS

    .has-header-image.home.blog .custom-header {
    height: auto;
}

.has-header-image.home .custom-header-media img {
    position: absolute;   
}
    Thread Starter Christian

    (@cantropo)

    okay, thank you very much. seems to work fine, even though the header image on pages is now a little more cropped to if you view the page on a pc or laptop.

    Hi, if you replace the code I gave you with the following

    @media screen and (max-width: 568px) {
	.has-header-image.home.blog .custom-header {
    	height: auto;
	}

	.has-header-image.home .custom-header-media img {
	    position: absolute;   
	}
}

    It should target mobile screen sizes only and use the default CSS for any browser width larger than 568px wide.

    Thread Starter Christian

    (@cantropo)

    okay, thanks.

Viewing 4 replies - 1 through 4 (of 4 total)
  • The topic ‘Header Image on Mobile’ is closed to new replies.