Mobile header image descends into body

  • Resolved travislongmore

    (@travislongmore)


    7 years, 9 months ago

    I’ve got my website setup mainly the way I want but on mobile the header image descends into the body of the page.I’ve tried a bunch of different things but can’t seem to get that to change at all. Anyone know what I could try?

    I’ve got an image of the issue on my tweet here.

    I’m hosted on Siteground if that makes a difference?

    These are the plugins running:
    Akismet Anti-Spam
    Backup
    Clef
    Duplicate Post
    Duplicator
    Select Envato Market
    EWWW Image Optimizer
    Imsanity
    Jetpack by WordPress.com
    Loginizer
    MailChimp for WordPres
    ND Stats For Envato Sales By Item
    Regenerate Thumbnails
    SG Optimizer
    Slider Revolution – Premium responsive slider
    Tracking Code Manager
    WP eCommerce.
    Webarx

    • This topic was modified 7 years, 9 months ago by travislongmore. Reason: Added plugins and host

    The page I need help with: [log in to see the link]

Viewing 9 replies - 1 through 9 (of 9 total)
  • Moderator t-p

    (@t-p)

    7 years, 9 months ago

    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.

    Thread Starter travislongmore

    (@travislongmore)

    7 years, 9 months ago

    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.

    js2484

    (@uniquelylost)

    7 years, 9 months ago

    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;
}
    Thread Starter travislongmore

    (@travislongmore)

    7 years, 9 months ago

    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.

    js2484

    (@uniquelylost)

    7 years, 9 months ago

    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.

    Thread Starter travislongmore

    (@travislongmore)

    7 years, 9 months ago

    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.

    Thread Starter travislongmore

    (@travislongmore)

    7 years, 9 months ago

    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.

    js2484

    (@uniquelylost)

    7 years, 9 months ago

    @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 7 years, 9 months ago by js2484.
    Thread Starter travislongmore

    (@travislongmore)

    7 years, 9 months ago

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

Viewing 9 replies - 1 through 9 (of 9 total)

The topic ‘Mobile header image descends into body’ is closed to new replies.