Viewing 9 posts - 1 through 9 (of 9 total)
  • Author
    Posts
  • #316424
    gibsonlp63
    Participant

    Hi,

    I have a site Downanddirtytrio.com where the header image is very focused and truncated on mobile devices.  Is there anything I can do to fix this.  Love the theme, by the way!

    Thanks

    #316431
    tikaram
    Participant

    @gibsonlp63 : can you please let me know if you would like to decrease the height of Header image or any other adjustments that you would like to make so that I can provide you the required additional css.

    Regards,
    Tikaram

    #316443
    gibsonlp63
    Participant

    Hi Tikaram,

    Thanks for your quick response.

    Ultimately I’d like to keep the height and width the same with just a smaller presentation.

     

    Mike

    #316565
    gibsonlp63
    Participant

    Hi Tikaram,

    Just thought I would ping you back on that CSS.  Any progress?

     

    Thanks!

    #316587
    tikaram
    Participant

    @gibsonlp63 :  Login to your WordPress admin section. Go to Appearance => Customize => Additional css and add the following css.

    @media only screen and (max-width: 600px) {
     .has-header-image.home .custom-header-media,
     .has-header-text.home .custom-header-media {
         min-height: 22vh; 
       }
     }

    Let me know if this helps you out.

    Regards,
    Tikaram

    #316592
    gibsonlp63
    Participant

    This is much closer but is still truncating the top of the header.  Is it possible to do the same for the Ipad.  It is has not changed?

    Thanks so much for your help!

    Mike

    #316642
    tikaram
    Participant

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

    @media only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
        .has-header-image.home .custom-header-media,
        .has-header-text.home .custom-header-media {
            min-height: 35vh;
        }
    }

    Regards,
    Tikaram

    #316680
    gibsonlp63
    Participant

    So, that fixed the ipad to show our header in the same way as the mobile device.  However, now both headers are truncating the top portion of the picture.  The picture presents fine on the computer.

    #316681
    gibsonlp63
    Participant

    ok, I wish I knew what I was doing with CSS.  Anyway I changed the VH value as noted below and that fixed the problem with the vertical truncation when the IPAD & Phone are vertical.  But when I change the the phone & ipad to horizontal, I get the truncation again and a little worse?

     

    Thanks,

    Mike

     


    @media
    only screen and (max-width: 600px) {
    .has-header-image.home .custom-header-media,
    .has-header-text.home .custom-header-media {
    min-height: 30vh;
    }
    }

    @media
    only screen and (min-device-width: 768px) and (max-device-width: 1024px) {
    .has-header-image.home .custom-header-media,
    .has-header-text.home .custom-header-media {
    min-height: 45vh;
    }
    }

Viewing 9 posts - 1 through 9 (of 9 total)
  • The topic ‘Header Image Truncated on Mobile Devices’ is closed to new replies.