[Fer]

Hi!

I’m working on “Catch Fullscreen Free” header and I would like to know if there is any possibility to have unique images for different device size. I need to show one different image for the header in mobile, tablet or desktop device/size.

I’ve tried with additional CSS but doesn’t works properly (shown below):

@media screen and (max-width: 400px) {
.home .custom-header .wp-custom-header img {
background-image: url(“http://localhost:8888/Dra.%20Cristina%20Sanchez/wp-content/uploads/2020/11/fullpage-header_mobile.jpg”);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
}

@media screen and (min-width: 1025px) {
.home .custom-header .wp-custom-header img {
background-image: url(“http://localhost:8888/Dra.%20Cristina%20Sanchez/wp-content/uploads/2020/11/fullpage-header_desktop.jpg”);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}
}

Could you please suggest what to do?

Thank you!

[Skandha]

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

@media screen and (min-width: 1025px) {
	.custom-header.header-media {
	    background-image: url("http://192.168.1.15/support/wp-content/uploads/2018/09/cropped-cropped-services3-1920x1080-1.jpg") !important;
	}
}

@media screen and (max-width: 400px) {
	.custom-header.header-media {
	    background-image: url("http://192.168.1.15/support/wp-content/uploads/2019/11/banner-photography.jpg") !important;
	}
}

Please replace the image url with the image url of your choice.
Let me know if this works out!
Kind Regards,
Skandha

[Fer]

Hi Skandha,

Thanks for your fast answer. I tell you that CSS code it worked while I watch the website on desktop and in mobile view (developer mode). But I cannot see any picture when I try to watch on mobile device and different browser.

I send URL and let me know.

What is happening? What I can do?

Thank you,
Fer

[Fer]

Due is a live website I cannot leave the CSS code while is not working, sorry.
Let me know how I can show you the issue.

[Fer]

I see the LINK button doesn’t apear…
Here is the URL:
https://www.dracristinasanchez.com

[Author]

Posts