[gibsonlp63]

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

[tikaram]

@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

[gibsonlp63]

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

[gibsonlp63]

Hi Tikaram,

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

 

Thanks!

[tikaram]

@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

[gibsonlp63]

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

[tikaram]

@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

[gibsonlp63]

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.

[gibsonlp63]

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;
}
}

[Author]

Posts