Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search
  • 0

Banner image being cut off


Azz
Go to solution Solved by tuanphan,

Question

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 

Link to post
  • Answers 19
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

Found it!!!

Add to Home > design > Custom CSS @media screen and (max-width:767px) { .homepage #page section:first-child { min-height: 20vh !important; height: 30vh; } }  

Add to Page Settings > Advanced > Header <style> @media screen and (max-width:767px) { #page section:first-child { min-height: 20vh !important; height: 30vh; } } </style&g

Posted Images

19 answers to this question

Recommended Posts

  • 0

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.

Link to post
  • 0

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

 

Link to post
  • 0
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 can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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

 

Link to post
  • 0

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

 

Link to post
  • 0
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;)

Edited by tuanphan

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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

Link to post
  • 0
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;
}
}

 

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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!

 

Link to post
  • 0

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?image.thumb.png.109d0915acdeaf3a81b16b32f01849eb.png

Edited by tuanphan

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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

 

 

 

Link to post
  • 0

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

Link to post
  • 0
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/

You can send your question to my email to get detail answer. / How to Setup Password & Share URL 

-- Pour your heart into it

Link to post
  • 0

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

 

Link to post

Create an account or sign in to comment

You need to be a member in order to leave a comment


×
×
  • Create New...