Tagged: ,

Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #304661
    yoyoma
    Participant

    Hello,

    Looking for help in using different images for website, tablet and mobile.  I found the following in your various threads, but it doesn’t work:

     


    @media
    screen and (min-width: 1025px) {
    .custom-header.header-media {
    background-image: url(“link goes here to library”) !important;
    }
    }


    @media
    screen and (max-width: 500px) {
    .custom-header.header-media {
    background-image: url(“link goes here to library”) !important;
    }
    }

    Thanks.

    #304676
    tikaram
    Participant

    @yoyoma : Please post in your site URL so that I can check and help you with the additional css.
    Regards,

    Tikaram

    #304677
    yoyoma
    Participant

    Hello,

    Website is https://wazoocrew.com.

    I would like to make the mobile banner a little higher and have cropped the larger banner to give a larger view. The banner intended for mobile would have dimensions of 500 x 300, instead of whatever the responsiveness reduces the 1920 x 835 to.

    Thanks for the help.

    yym

     

     

     

    #304736
    tikaram
    Participant

    @yoyoma : I will check for the solution and get back  to you soon.

    Regards,

    Tikaram

    #304851
    yoyoma
    Participant

    Hello,

    Just wanted to check back and inquire about possible solutions.

    Thanks,

    yym

    #305288
    yoyoma
    Participant

    Hello,

    Have not heard back since May 9. Can someone help me with this?

    Thanks kindly,

    #305293
    tikaram
    Participant

    @yoyoma : Please try adding the following additional css and let me know if it works as desired or not.

    @media only screen and (max-width: 768px) {
    .custom-header-media img {
    max-width: 150%;
    }
    }

     

     

    Regards,
    Tikaram

    #305296
    yoyoma
    Participant

    Hello Tikaram,

    Just tried. No it does not work.

    Is there any option to include a mobile specific header?

    Thank you.

     

    #305670
    tikaram
    Participant

    @yoyoma : The header image is supposed to be displayed as a background image from

      .custom-header::before
    
    

    But your site is displaying the header image from the following section

    <div id="wp-custom-header" class="wp-custom-header">
    
    </div>

    It looks like you have made changes to the code. To display the different header image for mobile you can insert a different background image for

     .custom-header::before

    with the help of media query. Let me know if I can help you in any way.

    Regards,
    Tikaram

     

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Different header images for web and mobile’ is closed to new replies.