Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • #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.

    #289746
    Skandha
    Keymaster

    @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

    #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?

    #289865
    Skandha
    Keymaster

    @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

    #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.

    #289902
    Skandha
    Keymaster

    @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

    #289913
    JoeMcOmber
    Participant

    Yes, that worked. Thank you!

    #289929
    Skandha
    Keymaster

    @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

Viewing 8 posts - 1 through 8 (of 8 total)
  • You must be logged in to reply to this topic.