[catwingz]

Or, as an alternative, please give me the code which will enable me to substitute another image for mobile and I will move on.
Thanks again

[Skandha]

@catwingz: Hello there, Can you try the following?
Remove the following CSS Code.

@media screen and (max-width:1000px) {
        .custom-header-media img {
                -o-object-fit:unset;
                object-fit:unset;
        }
}
.custom-header-content {
        padding:150px 0 !important;
}
@media screen and (max-width:767px) {
	.custom-header-content {
		padding:150px 20px;
	}
}

Then add the following CSS Code.

.custom-header-media img {
	position:unset;
}
.custom-header-content {
	padding:0;
}

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

[catwingz]

Hi Skandha,

After making those changes the desktop view is fine, but the view on mobile is still squashed horizontally.

Thanks

[Skandha]

@catwingz: Hello there,
Since you have a long-width banner image the image text will get squashed in smaller screens. I don’t think you can much about that. Maybe you can keep a different header image for smaller screens.

Kind Regards,
Skandha

[catwingz]

Hello Skandha,

To recap, my banner image is smaller than the stock one which comes with the theme.
Stock: 1920px x 822px
Mine 1920px x 573px
Both are 72 ppi.

I just tried out a fresh installation of the theme on another site with different hosting. In that scenario, instead of squashing the banner image on mobile, it crops it, treating it more like a background. Given this very different interpretation I am concerned we chose the wrong theme for this website.

Please give me the code which will allow me to substitute a different image for mobile and get past this problem.

Thank you

[Skandha]

@catwingz: Hello there,
Can you post in the URL of the site where the background image is cropping the way you like?

To have a different image on smaller screens
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width:600px) {
	.custom-header-content {
		background-image:url("https://catchthemes.com/demo/euphony-pro/wp-content/themes/euphony-pro/assets/images/header-image.jpg");
		background-size:cover;
	}
	.no-header-media-text .custom-header-media img {
		display:none;
	}
}

Replace the image URL with image of your choice.
Let me know if this helps you out!
Kind Regards,
Skandha

[Author]

Posts