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

Different Banner Image on Mobile

Joeyearthly

Asked by Joeyearthly,

Followers 14
Go to solution Solved by christyprice,

Question

Joeyearthly    1

Joeyearthly
Posted

Hello! So my site is  https://earthlycraft.co/

It's almost there... but i cant work one thing out. How to change one of my banner hero images for mobile. It looks great on desktop however its too small on mobile,  so i have another logo ready thats zoomed right in that i'd like to use for mobile only. I've added the file in design > custom css > manage custom files so i can use the link to the file

I'm fairly familiar with media queries but i don't know the code to change the banner. When I inspect I get this code:

.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img

Therefore i'm going for something along the lines of:

@media only screen and (max-width: 600px) {.sqs-block-image .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img {background image: https://static1.squarespace.com/static/5d00032088447c0001487495/t/5dcdc90c40062f0cf29e9ddc/1573767446853/mobilelogo.png;}}

Help would be much appreciated!!

Cheers!!

 

 

Link to post
  • Answers 40
  • Created
  • Last Reply

Top Posters For This Question

Popular Days

Top Posters For This Question

Popular Days

Popular Posts

christyprice

ETA: If you are on the newer Squarespace 7.1, this post has a walkthrough: How to Show a Different Banner Image on Mobile in Squarespace   Hi @Joeyearthly, If you are using an index pag

GMDI

@christyprice This sounds like an elegant solution. Do you have any troubleshooting advice? The code doesn't seem to affect my index sections, both remain visible. My site is igcalgary.com but I curre

christyprice

@justinpheap.co I use one Home index page. Within that index I have one subpage for desktop view and one subpage for mobile that I show/hide with the code above. 

Posted Images

40 answers to this question

Recommended Posts

  • 0

rwp    281

rwp
Posted

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

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

eliasbalk    0

eliasbalk
Posted
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) 

Link to post
  • 0

rwp    281

rwp
Posted

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.

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

eliasbalk    0

eliasbalk
Posted
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 post
  • 0

rwp    281

rwp
Posted
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?

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

eliasbalk    0

eliasbalk
Posted
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 post
  • 0

rwp    281

rwp
Posted

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.

 

Free Squarespace 7.1 Anchor Link and Accordion Plugins available here!

If I replied to one of your questions with code, it was either CSS or jQuery.

To add CSS, go to Design -> Custom CSS

jQuery needs some additional steps. Head here: https://code.jquery.com/ and click on minified, under jQuery 3.x and copy that code into Squarespace.

After you put that code into the code injection section in Squarespace, you can add the code I supplied. The code from me will need <script> added before it and </script> added after it (only for jQuery).

There are two places that you can add the code, one is site wide (adds to all pages). Settings -> Advanced -> Code Injection

The other is for a specific page (adds to one page only). Pages -> Gear Icon next to the page -> Advanced

Link to post
  • 0

CorinneJ    0

CorinneJ
Posted

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 post
  • 0

tuanphan    8,262

tuanphan
Posted
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.

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post
  • 0

christyprice    599

christyprice
Posted
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 

✅ Download a FREE Squarespace Prelaunch Checklist

7 Best Squarespace Plugins  •  Three Stylish Hacks for Your Squarespace Website  •  Resources for Designers

Link to post
  • 0

Aesthetic_Collab    1

Aesthetic_Collab
Posted (edited)
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! 



 

Edited by Aesthetic_Collab
Link to post
  • 0

tuanphan    8,262

tuanphan
Posted
16 hours ago, billystar101 said:

 

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

image.thumb.png.c5f6e871f1d2ea849da63979914f2b43.png

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

-- I'm Tuan, work for a non-profit project (build free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. 

Link to post

Create an account or sign in to comment

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

Sign Up / Login
Followers 14
Go to question listing
×
×
  • Create New...

Support

Community

Developers

Resources