Jump to content

Different Banner Image on Mobile

Go to solution Solved by christyprice,

Recommended Posts

This looks like its due to the web address bar hiding as you scroll.

The parallax code is setting the image height based on the viewport height. When the address bar goes away, the viewport height gets larger and increases the image size.

Link to comment
13 hours ago, rwp said:

This looks like its due to the web address bar hiding as you scroll.

The parallax code is setting the image height based on the viewport height. When the address bar goes away, the viewport height gets larger and increases the image size.

Hi @rwp, thank you for the explanation. That makes sense. Normally that does not happen on mobile with parallax so i am wondering if there might be some CSS which fixes the image height to the first determined height based on the initial viewport height? Any idea? 

Link to comment
2 hours ago, eliasbalk said:

Hi @rwp, thank you for the explanation. That makes sense. Normally that does not happen on mobile with parallax so i am wondering if there might be some CSS which fixes the image height to the first determined height based on the initial viewport height? Any idea? 

I didn't see anything when I looked.

Are you using squarespace's parallax, or a different code?

Link to comment
2 hours ago, rwp said:

I didn't see anything when I looked.

Are you using squarespace's parallax, or a different code?

I have the Squarespace Parallax active. No other code. Parallax works great until i use the CSS below. Then i get the zoom-in issue caused by the browser address bar hiding when on a mobile device.

/* show home page block dependent on screen size */ 
@media only screen and (max-width: 780px) { #home-banner { display: none; } } 
@media only screen and (min-width: 781px) { #home-banner-mobile { display: none; } }
Link to comment
  • 3 weeks later...

Hi guys, I don't have alot of experience in websites and Im trying to keep it simple. I have the same issue as the original question in this feed. When I uload my banner image on my home page the text (on the banner) is fine on the mobile version but looks huge on the desktop. So I was going to save two versions. I am unable to create index pages on my template or duplicate my homepage as it isn't an option. Does anyone have any ideas as to what I can do ?

Link to comment
41 minutes ago, CorinneJ said:

Hi guys, I don't have alot of experience in websites and Im trying to keep it simple. I have the same issue as the original question in this feed. When I uload my banner image on my home page the text (on the banner) is fine on the mobile version but looks huge on the desktop. So I was going to save two versions. I am unable to create index pages on my template or duplicate my homepage as it isn't an option. Does anyone have any ideas as to what I can do ?

Can you share site url? We can check easier.

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
4 minutes ago, Aesthetic_Collab said:

This is epic- I was just trying to figure this out!! Thank you @christyprice

Aw, thanks @Aesthetic_Collab! Glad it was helpful!

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 4 weeks later...
  • 1 month later...

Thanks @JustinBullseye! You made my day.

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment
  • 2 months later...
On 2/2/2021 at 9:50 AM, BlackcombHelicopters said:

Hi, I am looking for some help with this.

Marquee Template on 7.0

Trying to use a different page for Desktop and Mobile, but none of the code above seems to work:

https://blackcombhelicopters.com/

Hi. You want to use different banner or resize banner on mobile? If resize, we can give the code

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 3 weeks later...
13 hours ago, BlackcombHelicopters said:

We can try the resize code. Thanks.

Add to Design > Custom CSS

/* resize mobile home banner */
@media screen and (max-width:640px) {
body.homepage #parallax-images div:first-child img {
    width: 100% !important;
    top: 0 !important;
    left: 0 !important;
    height: auto !important;
}

}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
On 2/27/2021 at 4:16 AM, BlackcombHelicopters said:

Thanks for helping.

Unfortunately that won't work as the rest of the banner remains empty while the picture is resized.

 

 

Which banner you want to resize? 1 banner or which banner?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment
  • 4 weeks later...

@christypriceI am using your code on 7.1 but for some reason it is cropping the top of the banner image (section 2) on mobile. I have removed all other code on the site and it's still happening. I test it on a brand new test site and it works well there but on my client's site there's weird cropping happening. Any tips?

Screenshot 2021-03-25 at 21.48.37.png

Lucy O'Reilly
Designs For Growth Ltd
www.designsforgrowth.ie

Link to comment

@LucyDesigns this happened to me recently too. I added some margin, something like this, and that worked for me:

<style>
@media only screen and (max-width: 780px) {
    #page section:nth-of-type(1) { 
            display: none; 
    } 
   #page section:nth-of-type(2) { 
            margin-top: 100px; 
    } 
  }
@media only screen and (min-width: 781px) {  
    #page section:nth-of-type(2) { 
        display: none !important;
    }
  }
</style>

 

christyprice.com  🇺🇸 Austin, TX US 

 Get my 100+ item Client Process Checklist for $17.
📔 Flourish Journal for Creative Entrepreneurs - 365 days of prompts
🎥 Watch Circle Live: Hello Income (feat. Christy Price and Jeremy Schwartz)
🎬 Watch It's Not Hard to Say Goodbye: Crafting Client Offboarding from Circle Day 2023

Link to comment

Create an account or sign in to comment

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

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.