[tagadose]

New install of Catch themes. Tried both audioman and fullscreen Free, but same result. The background image appears well on desktop, but on other devices it is showing zoomed in. Tried different settings like “Default”, “Fit to Screen”, “Full Screen”, etc with and without Scroll with Page option, but no help. Do I need additional ccs script to fix this?

Website: http://www.justinmagnaye.com

I appreciate the help. Thank you.

[Skandha]

@tagadose: This is due to the object-fit:cover css code.
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width:767px) {
	.has-header-image .custom-header-media .wp-custom-header img, .has-header-video .custom-header-media .wp-custom-header video, .has-header-video .custom-header-media .wp-custom-header iframe {
		object-fit:fill !important;
	}	
}

Let me know if this is what you want!
Kind Regards,
Skandha

[tagadose]

Thank you, but the height did not adjust accordingly.

[Skandha]

@tagadose: For that
Go to => Appearance => Customize => Additional CSS and add the following Code.

.custom-header {
     height:100vh;
}

Let me know if this works out!
Kind Regards,
Skandha

[tagadose]

did not make any change, as if additional css did not contain any script.

[Skandha]

@tagadose: Use the following code instead of the previous one I provided you.

.custom-header {
     height:100vh !important;
}

Let me know if this works out!
Kind Regards,
Skandha

[tagadose]

i still need the @media script, right? i changed the height to 55vh and the background image is still stretched (not properly resized according to screen).

[Skandha]

@tagadose: Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (min-width:480px) {
	.custom-header {
 	    height:55vh;
	}
}

Let me know if this works out!
Kind Regards,
Skandha

[tagadose]

thanks, but i just took out all the css as nothing seems to work.

[Author]

Posts