Mobile header image descends into body

Mobile compatibility is theme-dependent.

Please identify exactly which theme you are using and then post in that theme’s dedicated forum via its page in the Theme Repository so the theme’s developers and support community can help you with this.

Thanks! I bought this theme a while ago and my support has run out. I was hoping this might be an easy fix without having to pay the support costs again ($41 or I can buy a whole new license for $59. Grr) for what seems like a simple thing.

• This reply was modified 6 years, 7 months ago by travislongmore.

Hey @travislongmore

Looks like theme is overlapping elements on mobile due to the custom CSS below. If you remove these CSS mentions it will no longer overlap and will use the themes default styling.

Location:
/wp-content/themes/photography/templates/custom-css.php

CSS:

#page_caption.hasbg {
	height: 35vh !important;
}

Location:
/wp-content/themes/photography/modules/kirki/assets/css/kirki-styles.css

CSS:

#page_caption.hasbg {
	height: 100vh;
}

Thank you so much!! That’s fixed that issue ?? I believe that was in there to reduce the height of the header/featured image image. Is there a way to do that but avoid this same problem? I seriously can’t thank you enough! I’m not great at this and that particular thing was really driving me crazy.

Hey @travislongmore

You can add something like this back to your custom css file to reduce the size on mobile-

@media only screen and (max-width: 767px) {
#page_caption.hasbg {
	height: 50vh !important;
}
}

And if you wanted to reduce the size on tablets/desktop you could add something like this after-

@media only screen and (min-width: 768px) {
#page_caption.hasbg {
	height: 75vh !important;
}
}

vh is the visual height percentage of the screen. Right now on tablet/desktop you have the visual height set at height: 100vh; so that picture will cover 100% of the screen, 75vh = 75%, 50vh = 50%. So you can adjust the values in the CSS above to what looks nice to you. If you have any caching plugins you may need to clear those and your browser cache to see the changes after you make them though.

Thank you so much @uniquelylost! That’s worked really well except the header text is still sitting higher than the bottom of the image on mobile. Do you know of a workaround to this or am I stuck on mobile?

Thanks for taking the time! I really really appreciate it.

• This reply was modified 6 years, 7 months ago by travislongmore.

Actually, @uniquelylost I think I fixed it! It looks like it was only doing that when you turned to landscape mode on the phone. I changed the CSS for just iPhone landscape view to 75vh and it looks great!

Hopefully, that works across all devices but looks good on my iPhone. Thanks again! I’m super grateful.

@travislongmore

Ah so you need to add this to match the other CSS or it does still overlap

#page_caption.hasbg #bg_regular, #page_caption.hasbg #bg_blurred {
	height: 50vh !important;
}

So if you had the mobile version and desktop version I posted before all together it would look like this-

@media only screen and (max-width: 767px) {
#page_caption.hasbg {
	height: 50vh !important;
}
#page_caption.hasbg #bg_regular, #page_caption.hasbg #bg_blurred {
	height: 50vh !important;
}
}

@media only screen and (min-width: 768px) {
#page_caption.hasbg {
	height: 75vh !important;
}
#page_caption.hasbg #bg_regular, #page_caption.hasbg #bg_blurred {
	height: 75vh !important;
}
}

• This reply was modified 6 years, 7 months ago by uniquelylost.

Thanks @uniquelylost! That looks like it’s worked now. Really appreciate the help on this!!