[JoeMcOmber]

My site is https://sericheybooks.com/

I saw that several other people asked about this in this support forum but I didn’t see a solution. Right now way too much of the sides of the image get cut off on mobile devices. I need to able to show all of the characters in the image on mobile devices.

[Skandha]

@joemcomber: Hello there,
Go to => Appearance => Customize => Additional CSS and add the following CSS Code.

@media screen and (max-width: 600px) {
    .custom-header::before {
        background-image: unset;
    }
    .custom-header-media img {
        display: block;
    }
    .custom-header-content {
        background-color: #000;
    }
    .home .custom-header .custom-header-content.content-center-top {
        padding: 30px;
    }
}

Let me know if this works out!
Kind Regards,
Skandha

[JoeMcOmber]

Hi,

This fixed the size of the banner on mobile devices but unfortunately this did some things that we don’t want. It created a black block below the banner and it put the text and button in the black block. We do not want a separate section. Instead, we want the text and button to overlay the banner. Is it possible to shrink the text and button a bit to fit over the banner on mobile devices?

[Skandha]

@joemcomber: Hello there,
Please use the following CSS Code instead.

.custom-header .wrapper:before {
	display: none;
}
.custom-header-media img, .custom-header-media video, .custom-header-media iframe {
    display: block;
    height: auto;
    position: unset;
    object-fit: unset;
}
.custom-header-content {
    padding: 254px 50px;
    position: absolute;
    top: 50%;
    padding: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
}
body:not(.home) .header-media .wrapper::after {
	display: none;
}
.home .custom-header .custom-header-content {
    padding-top: 300px !important;
}

@media screen and (max-width: 600px) {
    .home .custom-header-content .entry-title {
        font-size: 30px;
    }
    .home .custom-header-content .more-link {
        font-size: 20px;
        margin-top: 0;
        width: 120px !important;
        margin: 0 auto
    }
    .home .custom-header-content .entry-container {
        width: 570px;
    }
}

Let me know if this works out!
Kind Regards,
Skandha

[JoeMcOmber]

That fixed the mobile display but created some problems.

1. Large displays (1920px wide display) have the banner off center to the left now. Also, the text wraps which is unnecessary for this size of display.
2. Mid-size (tablet width) displays have the text slightly cut off on the top and the text wraps into 3 lines when it could be just one.

[Skandha]

@joemcomber: Hello there,
Please use the following CSS Code instead.

.custom-header .wrapper:before {
	display: none;
}
.custom-header-media img, .custom-header-media video, .custom-header-media iframe {
    display: block;
    height: auto;
    position: unset;
    object-fit: unset;
}
.custom-header-content {
    padding: 254px 50px;
    position: absolute;
    top: 50%;
    padding: 50px;
    left: 50%;
    transform: translate(-50%, -50%);
}
body:not(.home) .header-media .wrapper::after {
	display: none;
}
.home .custom-header .custom-header-content {
    padding-top: 300px !important;
}

@media screen and (max-width: 600px) {
    .home .custom-header-content .entry-title {
        font-size: 30px;
    }
    .home .custom-header-content .more-link {
        font-size: 20px;
        margin-top: 0;
        width: 120px !important;
        margin: 0 auto
    }
}
.home .custom-header-content .entry-container {
    width: 570px;
}

This should solve the image being cut off different screen size issue.
Let me know if this works out!
Kind Regards,
Skandha

[JoeMcOmber]

Yes, that worked. Thank you!

[Skandha]

@joemcomber: Hello there, I hope I was able to resolve your issue. If it’s not too much trouble, I have a quick request: could you please leave an honest review?
https://wordpress.org/support/theme/kids-camp/reviews/#new-post
Your review will help others know what to expect when they’re looking for the support I offer. Even a sentence or two would be hugely appreciated. Thanks, and if there’s anything else at all that I can do to help, don’t hesitate to let me know. Have a great weekend! 🙂

Kind Regards,
Skandha

[Author]

Posts