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

If you are on 7.1, here are new instructions: How to Show a Different Banner Image on Mobile in Squarespace

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!

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.

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

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

}

 

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

Link to post
  • 0

@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

Link to post
  • 0

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

 

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