Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #266847
    Fer
    Participant

    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!

    #266876
    Skandha
    Keymaster

    @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

    #267246
    Fer
    Participant

    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

    #267247
    Fer
    Participant

    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.

    #267264
    Fer
    Participant

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

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.