[Shieldmediaworks]

I have a header image that has a figure on each side of the page and a black centre, when I minimize to view on cellphone the figures disappear and all I’m left with is the black middle, is there a way to have the image shrink appropriately?

[sapana]

@shieldmediaworks: Please post in your site Url so that I can look into those issues.

Kind Regards,
Sapana

[Shieldmediaworks]

Hi Sapana

Thank you for wanting to look into this further, I am creating an adult themed website for my client. If this isn’t an issue for you the website address is http://www.wellingtonretreat.nz

[Skandha]

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

@media screen and (max-width:797px) {
	.has-header-image .custom-header-media .wp-custom-header img {
		object-fit:unset;
	}
}

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

[Shieldmediaworks]

Wow! This is so close, closer than I have been in days. The images look quite stretched is there a ratio thing happening? do I need to alter the height as well as the width? What would this look like when put in CSS?

Thank you so much for your help, it is greatly appreciated.

[Skandha]

@shieldmediaworks: I don’t think you can do much with the images looking stretched on smaller screens. As the header image you have put has two figure on the right and the left side it will look stretched when you decrease the width of screen in order to adjust with the screen size.

Kind Regards,
Skandha

[centrescene]

Hello,
I would like the header image (1920×1080) of the site I create to be responsive on a tablet and mobile.
How to do this, please?

Thank you for advance.
Regards.

[Skandha]

@centrescene: Please post in your site URL so that I can look into the issue.

Kind Regards,
Skandha

[valtht]

Hiya same thing here… can’t seem to fit the header image in the tablet or mobile view, if you have any idea how to do this, or if I just could upload an alternate header image for tablet/mobile view (in that case, I really need a step by step explanation…)?

have a nice day
http://saamaraproject.com/
Valentine

[Skandha]

@valtht: 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 works out!
Kind Regards,
Skandha

[centrescene]

Hello,

I’m sorry for my late.

My website is https://lisanttalespectaclemusical.com

Thank you for advance.
Regards.
Centrescene

[Skandha]

@centrescene: Hello Centrescence,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

.has-header-image .custom-header-media .wp-custom-header img {
	position:unset !important;
}

Let me know if this helps you out!
Kind Regards,
Skandha

[centrescene]

Hello,

Thank you for your answer.

I added this CSS code but the header image has been doubled on the smartphone’s browser.

Do you have an other solution for my header image ?https://lisanttalespectaclemusical.com

Thank you for advance.
Centrescene

[Skandha]

@centrescene: I checked your site on an android phone and it seems to showing up fine. Can you let me know on which smartphone the header image was appearing very large?

Kind Regards,
Skandha

[Author]

Posts