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

Different Banner Image on Mobile


Joeyearthly
Go to solution Solved by christyprice,

Question

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 42
  • Created
  • Last Reply

Top Posters For This Question

Top Posters For This Question

Popular Posts

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

@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

@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

Recommended Posts

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

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

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.

 

Link to post
  • 0

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
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 detail answer. / How to Setup Password & Share URL

--- Happy New Year

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

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

Create an account or sign in to comment

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


×
×
  • Create New...