Different Banner Image on Mobile

Hi @christyprice, thanks a lot for your detailed answer. @rwp It does work now beautifully by excluding the parallax effect from the mobile. But i am still trying to figure out a way to have parallax active on mobile as well.  

Can you enable the parallax so I can look into it?

4 minutes ago, rwp said:

Can you enable the parallax so I can look into it?

Hi @rwp, thanks for taking a look. its enabled now - cotorra-store.com/hompagetest - when scrolling it zooms in. (when accessed via mobile device) 

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.

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? 

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?

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; } }

Out of curiosity, what happens if you add:

#home-banner-mobile {height: 600px !important; }

That height won't be correct, I'm just curious if it will stop it from zooming.

If it does, I might have a fix.

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 ?

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.

Site URL

Access Password

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!

On 2/18/2020 at 8:27 PM, camilla.ciappina said:

Anyone else have this issue? I need someone to help

 

Hi there! I am trying to do the same with my website but it's not working..

https://ticket-channel.squarespace.com/

16 hours ago, billystar101 said:

 

I see fine here. Did you solve? If no, can you describe in more detail?

OMG! Thank You @christyprice!!
This solution on your website was SO easy and helped me a ton! 

https://christyprice.com/squarespace-tips-tricks/show-different-banner-mobile-desktop

Thanks @JustinBullseye! You made my day.

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/

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

We can try the resize code. Thanks.

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;
}

}

Thanks for helping.

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

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?

@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?

@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>

Oh my goodness, amazing! I couldn't work out where to add a margin or some padding but you've solved it for me. Thank you so much, you've solved a real headache!