Banner image being cut off

Site URL: http://www.akfitnessandhealth.com

Hi Tuan, 

Same problem here as most people.

Firstly my banner is looking blown up / getting pushed out of the area. I tired different px, still. 

Secondly, my mobile site is appearing cut off for the banner page. 

Your help is appreciated 

www.akfitnessandhealth.com 

Hi @Azz

I'd like to point out that banner images will always experience some cropping. This is the nature of how banners are designed and how they work with your site's built-in responsive design - the banner area will resize and crop differently depending on the size of the browser window viewing your site. That's why we usually recommend using abstract patterns and images without text or borders as banner images. Here's two Squarespace help articles outlining some best practices for banner images which might be a good starting point:

Adding banner images - Image formatting tips

Responsive design

For any further questions, please reach out to the Squarespace Customer Support team directly for personalized assistance.

thank you Tuan!!!

Hi Tuan, 

I used this code for my home page worked great. How do I get it to work on other pages on mobile? www.akfitnessandhealth.com/privatecoachingexperience

7 hours ago, Azz said:

Hi Tuan, 

 

I used this code for my home page worked great. How do I get it to work on other pages on mobile? www.akfitnessandhealth.com/privatecoachingexperience

 

Add to Page Settings > Advanced > Header

<style>
  @media screen and (max-width:767px) {
#page section:first-child {
    min-height: 20vh !important;
    height: 30vh;
}
}
</style>

You're the best. Do you take private gigs or have a VIP member option? 

My graphic designer doesn't know any of this stuff. 

thank you

Hi Tuan, 

The code allowed the whole image to be displayed however it is showing extended banners on mobile. Any ideas? www.akfitnessandhealth.com/privatecoachingexperience

Thank you

19 hours ago, Azz said:

Hi Tuan, 

The code allowed the whole image to be displayed however it is showing extended banners on mobile. Any ideas? www.akfitnessandhealth.com/privatecoachingexperience

 

Thank you

 

edit your code to

@media (max-width: 767px) {
    [data-section-id="5f95ef325f4c6062f8975c76"] .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;
    }
}

(background-repeat: no-repeat;)

Hmmm no luck!!

Also have an image close to the bottom of the page that cuts off on mobile. Suggestions and help is more than appreciated. Thank you

On 10/31/2020 at 5:30 AM, Azz said:

Also have an image close to the bottom of the page that cuts off on mobile. Suggestions and help is more than appreciated. Thank you

Add to Home > Design > Custom CSS

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

Thank you so much Tuan!!! 

Hopefully one of my last questions here. 

I would like to use my mailchimp signup form on this page. I have read all the help articles and talked to chat support, but nada. Your help is appreciated!

You can create signup form in Mailchimp.com, then edit above page > Add Code Block > Paste mailchimp embed code.

On 11/3/2020 at 1:01 AM, Azz said:

Thank you so much Tuan!!! 

Hopefully one of my last questions here. 

I would like to use my mailchimp signup form on this page. I have read all the help articles and talked to chat support, but nada. Your help is appreciated!

 

Also, I see your site has some problems.

1.Site content seems to be skewed to the right. So the left side has border, the right doesn't, and on the phone you can drag the screen left / right, which looks very ugly.

2. Site content is very long, you can add back to top button, It will be better.

You can follow this free guide to create back to top

3. Tablet: Homepage Top banner is not fullsize, you can add this to Home > Design > Custom CSS

@media screen and (max-width:991px) and (min-width:768px) {
.homepage #page section:first-child {
    min-height: 20vh;
}
}

4 Tablet. Do you want stack Welcome section & increase text width of some section?

Appreciate your feedback Tuan! I can add the back to top button. It is a landing page which are usually soo long.

Question - how do I fix this: "---> Site content seems to be skewed to the right. So the left side has border, the right doesn't, and on the phone you can drag the screen left / right, which looks very ugly."

Also - I can't seem to find this

You can create signup form in Mailchimp.com, then edit above page > Add Code Block > Paste mailchimp embed code.

Please and thank you

On 11/5/2020 at 3:03 PM, Azz said:

Appreciate your feedback Tuan! I can add the back to top button. It is a landing page which are usually soo long.

Question - how do I fix this: "---> Site content seems to be skewed to the right. So the left side has border, the right doesn't, and on the phone you can drag the screen left / right, which looks very ugly."

 

 

 

Add to Home > Design > Custom CSS

/* fix site border bug */
@media screen and (max-width:767px) {
#page {
    width: auto !important;
}
}

On 11/5/2020 at 3:05 PM, Azz said:

Also - I can't seem to find this

You can create signup form in Mailchimp.com, then edit above page > Add Code Block > Paste mailchimp embed code.

 

Please and thank you

See this. https://mailchimp.com/help/add-a-signup-form-to-your-website/

Hey Tuan, Yes I have embedded mailchimp into my wordpress website no problem. It is with Squarespace 7.1 that I have no idea how to include code/code block. Can't find it anywhere. 

Thank you

Found it!!!

On 11/10/2020 at 4:32 AM, Azz said:

Found it!!!

Okay. If you have any other problems, just comment on this topic.

Hi Tuan, 

On this page. unable to see full banner pic. Your help on code to insert is appreciated. 

www.akfitnessandhealth.com/freestretchguide

Is there a way for me to be able to know the code for future pages? 

Thank you!

20 hours ago, Azz said:

Hi Tuan, 

On this page. unable to see full banner pic. Your help on code to insert is appreciated. 

www.akfitnessandhealth.com/freestretchguide

Is there a way for me to be able to know the code for future pages? 

Thank you!

Add to Home > Design > Custom CSS

/* resize banner */
@media screen and (max-width:767px) {
body#collection-5f9f3f32c73af0034ba44d7b #page section:first-child {
    min-height: unset !important;
    height: 50vh;
    margin-top: 50vh;
}
}

Hi Tuan, 

You had helped me before with the banner image on this page, but it again seems to cut off on mobile. 

www.akfitnessandhealth.com

Your help is greatly appreciated! 

Thank you

On 1/8/2021 at 4:55 PM, Azz said:

Hi Tuan, 

You had helped me before with the banner image on this page, but it again seems to cut off on mobile. 

www.akfitnessandhealth.com

Your help is greatly appreciated! 

Thank you

Hi. Can you take screenshot the banner? I don't see.

Hi Tuan, 

Here is the screenshot.