Different Banner Image on Mobile

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

On 6/8/2020 at 5:48 PM, christyprice said:

If you are on 7.1, here are new instructions:

How to Show a Different Banner Image on Mobile in Squarespace

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

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!

16 minutes ago, christyprice said:

Aw, thanks @Aesthetic_Collab! Glad it was helpful!

I was actually am trying to hide page sections, not just banners, so  I have a section that is like then 6th section down on a page that I want to show on mobile and the 5th section show on desktop... So I applied your code snippet from your blog with numbers 5 and 6 respectively and it worked!!

I was trying this code snippet that works with 7.0 but with the section ids and all that was happening was the content of the section was being hidden.

- this was just hidding the content******* did not work******

/* show home page block dependent on screen size */ 

@media only screen and (max-width: 780px) { #page-section-5f32beddff51745f9769b41a { display: none; } } 

@media only screen and (min-width: 781px) { #page-section-5f32beddff51745f9769b414 { display: none!important; } }

So thanks again -It's sometimes challenging to figure out the new ways of coding for 7.1

Thank you for pioneering the way! 

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.