Header Media - Mobile Responsive

Tagged: header media, mobile

This topic has 7 replies, 2 voices, and was last updated 3 years, 3 months ago by Skandha.

Viewing 8 posts - 1 through 8 (of 8 total)

Author

Posts
September 9, 2021 at 2:06 am #289685

JoeMcOmber
Participant

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.

September 9, 2021 at 4:16 am #289746
Skandha
Participant
@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
September 9, 2021 at 11:53 am #289783

JoeMcOmber
Participant

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?

September 10, 2021 at 6:43 am #289865
Skandha
Participant
@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
September 10, 2021 at 9:16 pm #289881

JoeMcOmber
Participant

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.

September 10, 2021 at 9:40 pm #289902
Skandha
Participant
@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
September 11, 2021 at 12:16 am #289913

JoeMcOmber
Participant

Yes, that worked. Thank you!

September 11, 2021 at 9:02 am #289929

Skandha
Participant

@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