Banner image being cut off

On 1/14/2021 at 1:09 AM, Azz said:

Hi Tuan, 

 

Here is the screenshot.

 

Add to Design > Custom CSS

/* resize mobile banner */
@media screen and (max-width:767px) {
[data-section-id="5f2453abdd762255c527ea51"] {
    min-height: 20vh !important;
    height: 30vh;
}
}

Hi @tuanphan same problem with the banner being cut off in mobile! edgecatering.ca

On 1/22/2021 at 6:31 AM, BAA said:

Hi @tuanphan same problem with the banner being cut off in mobile! edgecatering.ca

Home first banner? Add to Design > Custom CSS

/* resize mobile banner */
@media screen and (max-width:767px) {
body.homepage #page section:first-child {
    min-height: 20vh !important;
    height: 30vh;
    margin-top: 10vh;
}
}

Hi @tuanphan I'm having the same issue with my banner image being cut off no matter how much I try to resize the image.

https://www.mamaflowstudio.com/core-restore-v2

I appreciate the help!

On 7/7/2021 at 11:10 PM, CGieser said:

Hi @tuanphan I'm having the same issue with my banner image being cut off no matter how much I try to resize the image.

 

https://www.mamaflowstudio.com/core-restore-v2

 

I appreciate the help!

Hi. You mean mobile or desktop?

Hi all, 

Hope you're all well! I wanted to reach out regarding the site below, particularly around mobile image cropping on the product detail pages. 

https://www.gildageorgetennisclub.com/shop-all

For background, when attempting the solutions mentioned above the images on my site on mobile appeared in full without any cutoff, however, the images appeared further down on the page with lots of white space appearing above. Is there a solve to have the images on mobile appear not cutoff and still in the correct layout? 

Could someone please help me to remedy? 

Many thanks in advance! : ) 

On 2/10/2022 at 2:48 AM, TeddyMc said:

Hi all, 

 

Hope you're all well! I wanted to reach out regarding the site below, particularly around mobile image cropping on the product detail pages. 

 

https://www.gildageorgetennisclub.com/shop-all

 

For background, when attempting the solutions mentioned above the images on my site on mobile appeared in full without any cutoff, however, the images appeared further down on the page with lots of white space appearing above. Is there a solve to have the images on mobile appear not cutoff and still in the correct layout? 

 

Could someone please help me to remedy? 

 

Many thanks in advance! : ) 

I see no banner image on shop page. Can you take a screenshot?

Hi @tuanphan

I found this thread and thought you may be able to help. I have created a banner slideshow on my home screen to show visitors different features available to them when they download my mobile product. The tricky bit, I am trying to make the content>title text a different color on each slide. There doesn't appear to be a feature that allows me to have multiple text colors in a banner slideshow. My workaround was to publish images with the different color text but those get cut off for mobile. 

Thanks so much for any help you can provide! 

7 hours ago, Alliem said:

Hi @tuanphan

I found this thread and thought you may be able to help. I have created a banner slideshow on my home screen to show visitors different features available to them when they download my mobile product. The tricky bit, I am trying to make the content>title text a different color on each slide. There doesn't appear to be a feature that allows me to have multiple text colors in a banner slideshow. My workaround was to publish images with the different color text but those get cut off for mobile. 

 

Thanks so much for any help you can provide! 

Hi,

What is page url? We can help easier

Hi, thank you so much for this.  The previous coding worked for me to combat the cut off banner image on the laptop but now for some reason the coding is showing on the website mobile site. 

Please see screenshot... 

www.kehawellness.com

18 hours ago, Keha_Wellness said:

Hi, thank you so much for this.  The previous coding worked for me to combat the cut off banner image on the laptop but now for some reason the coding is showing on the website mobile site. 

Please see screenshot... 

www.kehawellness.com

Try checking your Code Injection Header & Footer, Page Header, find that code & remove it.

Thank you so much for your response.  Sadly its still a mess on the mobile, sections all over the place 😞 

kehawellness.com

On 10/5/2022 at 7:46 PM, Keha_Wellness said:

Thank you so much for your response.  Sadly its still a mess on the mobile, sections all over the place 😞 

kehawellness.com

 

Can you send all current code in Page Header, Home Page Header (Hover Home Page on Main > Navigation or Not Linked > Click Gear icon > Advanced > Look right, it is Home Page Header)

@media (max-width: 767px) {
    [data-section-id="6327d908d0bd01031e271634"] .section-background img {
        display:none !important
    }

    [data-section-id="5f95ef325f4c6062f8975c76"] .section-background {
        background-image: url("https://static1.squarespace.com/static/5f0219f72c338a1f503af4a8/t/5f9843204c03d55a48bacb79/1603814180414/womenshealthfitnesscoachvancouver+%288%29+%281%29.png");
        background-position: center;
        background-repeat: no-repeat;
    }
}

On 10/8/2022 at 7:13 PM, Keha_Wellness said:

@media (max-width: 767px) {
    [data-section-id="6327d908d0bd01031e271634"] .section-background img {
        display:none !important
    }

    [data-section-id="5f95ef325f4c6062f8975c76"] .section-background {
        background-image: url("https://static1.squarespace.com/static/5f0219f72c338a1f503af4a8/t/5f9843204c03d55a48bacb79/1603814180414/womenshealthfitnesscoachvancouver+%288%29+%281%29.png");
        background-position: center;
        background-repeat: no-repeat;
    }
}

This code is invalid. With CSS code in Page Header/Code Injection, you need to wrap it in style tag

<style>
  @media (max-width: 767px) {
    [data-section-id="6327d908d0bd01031e271634"] .section-background img {
        display:none !important
    }

    [data-section-id="5f95ef325f4c6062f8975c76"] .section-background {
        background-image: url("https://static1.squarespace.com/static/5f0219f72c338a1f503af4a8/t/5f9843204c03d55a48bacb79/1603814180414/womenshealthfitnesscoachvancouver+%288%29+%281%29.png");
        background-position: center;
        background-repeat: no-repeat;
    }
}
</style>

If you don't wrap it, it will appear as static text, same as problem you wrote above.

Thank you so much for this thus far, you are very knowledgable.  This has resolved the removal of the unwanted texted but the format and layout is still all over the place, see screenshots. Would it be easier to delete the banner image and text and start again the resolve? 

On 10/13/2022 at 8:44 PM, Keha_Wellness said:

Thank you so much for this thus far, you are very knowledgable.  This has resolved the removal of the unwanted texted but the format and layout is still all over the place, see screenshots. Would it be easier to delete the banner image and text and start again the resolve? 

 

 

Yes. You can remove the code, we will check it again

It looks just the same without the code.