Docs

[Goliath Apps]

Hey Support,

What are the dimensions to get the cover image to display correctly on mobile? As you can see from the attachment, the image goes off the screen. Thanks

[Paul R]

Hi,

Kindly provide us your site url and re-upload your image so we can understand what you are trying to achieve.

Thanks

[Goliath Apps]

Yes, the site url: http://www.sanantoniolegacybasketball.com

[Goliath Apps]

Yes, the site url: http://www.sanantoniolegacybasketball.com

[Friech]

Hi There,

Thank you for the link, at first I thought you’re referring to a feature images. But you don’t have a featured images would you mind to clarify what cover photo you’re referring to? Screenshot would be much appreciated.

Good day.

[Goliath Apps]

Hey Friech,

Sorry about not clarifying, the cover image used when uploading a video background goes off mobile screens as seen from the screenshot attached. How can I make the black logo image mobile responsive or keep it from going off to the sides. Hope I was able to clarify. Thx

[Goliath Apps]

Sorry my attachment was too big but I resized it.

[Jade]

Hi there,

Please try to add this code in the customizer:

@media (max-width: 480px) {
    .tp-bgimg.defaultimg {
        background-size: contain !important;
    }

    .x-slider-container .rev_slider_wrapper,
    .fullwidthbanner-container .fullwidthabanner {
        height: 300px !important;
    }

}

Hope this helps.

[Goliath Apps]

Hey Jade thanks for the suggestion. I went ahead and inserted the code but now the image does not fill up the container as seen from the attached screenshot.

[Lely]

Hi There,

In that case, please update above CSS to this:

@media (max-width: 480px) {
    .tp-bgimg.defaultimg {
        background-size: contain !important;
        background-image: url(http://www.sanantoniolegacybasketball.com/wp-content/uploads/2016/11/Black-legacy-logo-OPTIMIZED.jpg) !important;
    }

    .x-slider-container .rev_slider_wrapper,
    .fullwidthbanner-container .fullwidthabanner {
        height: 300px !important;
    }

}

Your background image is horizontal and we need a vertical type of image on mobile view. That CSS will override it. Just replace the URL of the image with a vertical one that you think will fit for mobile view.

Hope this helps.

[Goliath Apps]

K thanks X-Staff!

[Friech]

You’re more than welcome, glad we could help.

Cheers!

[Author]

Posts