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

Different Banner Image on Mobile

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

 

 

Share this post


Link to post

15 answers to this question

Recommended Posts

  • 2

Hi @Joeyearthly,

If you are using an index page, I have a different workaround that I like a bit better, since you can make whole area specific for mobile instead of just the banner image. I create two "sub-pages" at the top of the index page, one for desktop view (with the URL slug home-banner) and one for mobile view (with the URL slug home-banner-mobile). Then I add the following code to Custom CSS. (Note that if you want to edit the mobile from your desktop, you'll need to briefly comment out the code so you can see that page on desktop.)

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

 

Share this post


Link to post
  • 0

Hey @christyprice

Thank you so much for this! Great workaround thats done exactly what I wanted it to! That's some outside the box thinking right there...great stuff!

It has presented a bit of a problem though, in that I still don't know how to call the banner image. The container for the image is too darn small and it just cuts off the edges top and bottom of any image I put there....so the bigger zoom image idea isn't working perfectly, yet. If you have any ideas on this code do let me know!

So far, without joy, i've tried 

.sqs-block-html  , .sqs-block-image, .sqs-block-html , .sqs-block-markdown blockquote, .image-block-outer-wrapper:not(.image-block-v2) .intrinsic .image-block-wrapper img

and I just cant get that container to move.

Share this post


Link to post
  • 0
On 11/14/2019 at 4:03 PM, christyprice said:

If you are using an index page, I have a different workaround that I like a bit better, since you can make whole area specific for mobile instead of just the banner image. I create two "sub-pages" at the top of the index page, one for desktop view (with the URL slug home-banner) and one for mobile view (with the URL slug home-banner-mobile). Then I add the following code to Custom CSS. (Note that if you want to edit the mobile from your desktop, you'll need to briefly comment out the code so you can see that page on desktop.)


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

 

@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 currently have the mobile only section unlinked, it's not live on my homepage.

Thanks for your help.

Share this post


Link to post
  • 0

@christyprice I love this solution and arrived at something similar for my sites, too. One problem I am running into is essentially the use of Relative Links in the nav menu. So, for example, when users arrive at my site (www.mitchbakker.com) via mobile, they landing page, url slug /home-mobile, is great –but then the primary nav links still point to the url slug /home. So, the user naturally clicks to go "home" at some point, and then they are met with the desktop version of /home. 

Any thoughts on how to provide a solution? 

Share this post


Link to post
  • 0
30 minutes ago, christyprice said:

@justinpheap.co, I use index pages and just hide/show the subpages, so the page URL stays the same. 

Thanks for the quick reply, @christyprice! So, I am currently setup with two separate Index Pages (screenshot). Is this what you recommend with your code –adding it to the overall CSS, then? Thanks again 🙂

Screen Shot 2020-02-06 at 11.11.39 AM.png

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

@christyprice so I implemented your code and created the subpage for mobile view, and it works perfectly EXCEPT for some reason, my Squarespace site is now taking the small mobile images (250 pixels wide) and still stretching them so now I have pixelated images stretched farther than the width of my mobile screen (as opposed to high-resolution, desktop size images stretched farther than my mobile screen, see screenshot attached). Help!

What is wrong? How do I fix this so it stops stretching the images beyond the width of the mobile screen???  I've tried everything I can find online to do, and I just can't seem to get Squarespace to resize images for mobile correctly! 

Test site: https://rhino-dogfish-zyb7.squarespace.com/
Password: Bishop

Thanks 🙏

IMG_2473.PNG

Share this post


Link to post
  • 0

@BRepairers, it's hard to know without seeing your code and images. It might be an issue with the mobile breakpoints. Double check those.

Edited by christyprice

Share this post


Link to post
  • 0
3 minutes ago, christyprice said:

@camilla.ciappina

As with the site above, you’d likely need to have someone log in as an admin to check your code and your images. 

@christyprice if I provide you if access, would you be able to guide me? or I can send the images and screenshot of the code I did for you to review..

thank you so much!

Share this post


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