Is it possible to have different images on the mobile version of the website and desktop version?

24 minutes ago, NikkiBF said:

I've tried that and it doesn't seem to work. I don't seem to have got the others one working either (thought I had - sorry). Could you please check and tell me what I have done wrong?

thanks so much - really appreciate this!

Did you replace your code with the code below?

@media screen and (max-width:767px) {
  div#block-yui_3_17_2_1_1692417960012_5637 img {
    content: url(https://static1.squarespace.com/static/6429f3c0cdf19824d12c4bd9/t/64e0fc23b71d18560d3da670/1692466211285/Group+47.png);
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
  }
  div#block-yui_3_17_2_1_1692310337056_21015 img{
    content: url(https://static1.squarespace.com/static/6429f3c0cdf19824d12c4bd9/t/64e0f5ca4bcf6260506b359e/1692464586733/Group+46.png);
    height: auto !important;
    top: 50% !important;
    transform: translateY(-50%);
  }
  div#block-yui_3_17_2_1_1692417960012_5637, div#block-yui_3_17_2_1_1692310337056_21015 {
    .sqs-image-content {
      height: 100% !important;
    }
  }
}

Think we are getting our threads confused! My message was for @tuanphan

But it's resolved now. So thank you loads @tuanphan

@CassAggett I am having a similar issue. I successfully made my desktop image different than mobile. but now, every time I create a new page, the photo on the homepage keeps appearing on the other pages. is this something you can assist me with?

5 hours ago, abelm said:

@CassAggett I am having a similar issue. I successfully made my desktop image different than mobile. but now, every time I create a new page, the photo on the homepage keeps appearing on the other pages. is this something you can assist me with?

Hi @abelm, please share your website address and I'll take a look.

Few questions:

1. How did you add the photo to the home page?
2. How are you creating your new pages?
3. When you say the home page photo appears on other pages, can you describe this a bit more?

@CassAggett thanks for the quick reply. I was able to solve the issue with the homepage image appearing on other pages. However, I now have a different problem. Uploading different desktop/mobile images on the homepage was easy. But I'm having issues on the 2nd page. Since the desktop image is layered with text (no text on homepage), and I would not only like a different mobile image on the 2nd page, but also the text to appear below the image (rather than layered), I've been playing with the sections a bit and found a temporary workaround (includes adding an extra section on desktop version below header...too confusing to fully explain).

Short question: is there a way to have different images on desktop/mobile when the image in question is layered with a text block? Specifically, I would like the desktop version to have the text on top of the image and the mobile version to have the text below the image.

url: policypoint.us

...and to answer your questions:

1. the image on the desktop version of the homepage was added as a background image to section 1. the mobile image was added using CSS (uploaded as a custom file and injected into header). the desktop and mobile images on the 2nd page (meet me) were added similar to the homepage.

2. I'm clicking the + sign on the pages menu (Version 7.1) to add new pages.

3. N/A


 

@abelm Here's a post where I explained how I sometimes do a different image on desktop and mobile without code:

On desktop, position the text over the image, then on mobile you can resize the image, adjust the focal point and position the text below it.

If you'd like to try this, I'd suggest duplicating the page to test it out, and if it doesn't achieve what you're after you don't have to try re-do the original page as you haven't changed it.

Hi. My website is www.many-seeds.com and I want to have a different version of the YOU + 15 Seconds on mobile vs desktop. Can you help? Big thanks in advance.

On 10/8/2023 at 12:28 AM, JordanWH said:

Hi. My website is www.many-seeds.com and I want to have a different version of the YOU + 15 Seconds on mobile vs desktop. Can you help? Big thanks in advance.

Where is YOU+..? I don't see it on homepage

7 hours ago, tuanphan said:

Where is YOU+..? I don't see it on homepage

My apologies. It's on the supporters page. www.many-seeds.com/supporters

On 10/10/2023 at 12:25 AM, JordanWH said:

My apologies. It's on the supporters page. www.many-seeds.com/supporters

You can add this to Website Tools (under Not Linked) > Custom CSS to replace it with new image on mobile

/* you+ 15 on mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1696540427469_2540 img {
    content: url(https://cdn.pixabay.com/photo/2023/03/07/10/04/clamshell-orchid-7835395_1280.jpg);
}}

Replace pixabay image with new image url

On 10/12/2023 at 6:41 AM, tuanphan said:

You can add this to Website Tools (under Not Linked) > Custom CSS to replace it with new image on mobile

/* you+ 15 on mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1696540427469_2540 img {
    content: url(https://cdn.pixabay.com/photo/2023/03/07/10/04/clamshell-orchid-7835395_1280.jpg);
}}

Replace pixabay image with new image url

Thanks that worked to get the right image on the mobile page. It displays very small on mobile though when it's set to fit and if I change it to fill the sides are cut off and it cuts the sides off the image on desktop as well. Is there anything I can do to fix that? Thanks sincerely for your help.

On 10/14/2023 at 10:01 AM, JordanWH said:

Thanks that worked to get the right image on the mobile page. It displays very small on mobile though when it's set to fit and if I change it to fill the sides are cut off and it cuts the sides off the image on desktop as well. Is there anything I can do to fix that? Thanks sincerely for your help.

Use this new code

/* you+ 15 on mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1696540427469_2540 img {
    content: url(https://cdn.pixabay.com/photo/2023/03/07/10/04/clamshell-orchid-7835395_1280.jpg);
    object-fit: cover !important;
    height: auto !important;
}}

17 hours ago, tuanphan said:

Use this new code

/* you+ 15 on mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1696540427469_2540 img {
    content: url(https://cdn.pixabay.com/photo/2023/03/07/10/04/clamshell-orchid-7835395_1280.jpg);
    object-fit: cover !important;
    height: auto !important;
}}

 

Got it working with that one. Thank you very much for your help!!

I'm trying to do this as well on https://tulip-violet-lt2r.squarespace.com/ (Lindvirke2023)

I want the square ones to display on mobile, and the long ones to display on desktop. Any pointers? 

1 hour ago, Fasett said:

I'm trying to do this as well on https://tulip-violet-lt2r.squarespace.com/ (Lindvirke2023)

I want the square ones to display on mobile, and the long ones to display on desktop. Any pointers? 

Never mind, I think I figured this out. 🙂

Hi there! 

I'm trying to get the hero text image on this website (https://drmichelleweiner.squarespace.com/ pw: MW2023!) to be different on mobile. I've figured most of it out through the assistance of ChatGPT and this thread,  but now, I'm encountering difficulties with both the Hero image as well as the Hero Image text. I need to change the hero image to a vertical image and I need the hero image text to disappear on mobile. 

Basically, I need a different hero image and mobile text image for both mobile and desk top. I tried the coding outlined here in this thread, but I encountered the mobile image being too small or not showing up entirely because the desktop image is much longer. So, I tried adding a different image block to show once in mobile. However, here- the desktop image will not disappear, it still shows on mobile. Screenshot also included in this post. 

The code I used for the current formatting is below (please help me include coding to change the hero image on mobile- my client's face is cut off: 

/* Dr MW Hero Text - Desktop */
div#block-yui_3_17_2_1_1698275164210_47548 img.desktop-image {
    content: url(https://images.squarespace-cdn.com/content/64fb8378a809ea11c70c62dc/c6c012ae-1e86-4c7b-b008-9b4bd68d218e/Dr+Michelle+Weiner+Pain+Expert.png?content-type=image%2Fpng);
  
}

/* Dr MW Hero Text - Mobile */
@media screen and (max-width: 767px) {
    div#block-yui_3_17_2_1_1698275164210_47548 img.desktop-image {
        display: none !important;
    }
    div#block-yui_3_17_2_1_1698703169827_36238 {
        content: url(https://images.squarespace-cdn.com/content/64fb8378a809ea11c70c62dc/5e93fa51-be35-402d-8461-4ccc29adfd1f/Dr+MW+Pain+Expert+Text+Hero+Mobile%402x.png?content-type=image%2Fpng);
        object-fit: fill !important;
        height: auto !important;
    }
}

On 10/31/2023 at 5:26 AM, CoulterCreativeCo said:

Hi there! 

I'm trying to get the hero text image on this website (https://drmichelleweiner.squarespace.com/ pw: MW2023!) to be different on mobile. I've figured most of it out through the assistance of ChatGPT and this thread,  but now, I'm encountering difficulties with both the Hero image as well as the Hero Image text. I need to change the hero image to a vertical image and I need the hero image text to disappear on mobile. 

Basically, I need a different hero image and mobile text image for both mobile and desk top. I tried the coding outlined here in this thread, but I encountered the mobile image being too small or not showing up entirely because the desktop image is much longer. So, I tried adding a different image block to show once in mobile. However, here- the desktop image will not disappear, it still shows on mobile. Screenshot also included in this post. 

The code I used for the current formatting is below (please help me include coding to change the hero image on mobile- my client's face is cut off: 

/* Dr MW Hero Text - Desktop */
div#block-yui_3_17_2_1_1698275164210_47548 img.desktop-image {
    content: url(https://images.squarespace-cdn.com/content/64fb8378a809ea11c70c62dc/c6c012ae-1e86-4c7b-b008-9b4bd68d218e/Dr+Michelle+Weiner+Pain+Expert.png?content-type=image%2Fpng);
  
}

/* Dr MW Hero Text - Mobile */
@media screen and (max-width: 767px) {
    div#block-yui_3_17_2_1_1698275164210_47548 img.desktop-image {
        display: none !important;
    }
    div#block-yui_3_17_2_1_1698703169827_36238 {
        content: url(https://images.squarespace-cdn.com/content/64fb8378a809ea11c70c62dc/5e93fa51-be35-402d-8461-4ccc29adfd1f/Dr+MW+Pain+Expert+Text+Hero+Mobile%402x.png?content-type=image%2Fpng);
        object-fit: fill !important;
        height: auto !important;
    }
}

 

Hi,

It looks like you figured it out?

Hi, I'd like to have a different image for my header on desktop and mobile. Is this possible?

On 12/13/2023 at 11:35 PM, rosstrigg said:

Hi, I'd like to have a different image for my header on desktop and mobile. Is this possible?

You can hide a section on desktop - hide another on mobile, I wrote a quick guide to achieve this, you can see.

If you still have problem, you can share site url + let me know which image, I can help easier

Hi. I'd like to have a different background image on the home page of the desktop version to that which appears on the mobile version. Is that possible? Thanks so much. 

22 hours ago, BenHorden said:

Hi. I'd like to have a different background image on the home page of the desktop version to that which appears on the mobile version. Is that possible? Thanks so much. 

Background image on a section or whole page? if a section, I wrote a guide, you can see above comment

If whole page, can you share page url?

Hi @tuanphan, I'd like to display a different photo carousel for both desktop and mobile. I could not successfully implement any of the previous codes provided in this thread so I wanted to see if you or anyone else knew how I could do this for the following website.

I'm using the below page link to test this functionality before moving the carousels to my homepage. Both the desktop and mobile carousels I would like to use are included here. Thank you in advance!

https://buddhistchurchofsac.squarespace.com/new-carousel

On 12/20/2023 at 4:22 PM, sdfong said:

Hi @tuanphan, I'd like to display a different photo carousel for both desktop and mobile. I could not successfully implement any of the previous codes provided in this thread so I wanted to see if you or anyone else knew how I could do this for the following website.

I'm using the below page link to test this functionality before moving the carousels to my homepage. Both the desktop and mobile carousels I would like to use are included here. Thank you in advance!

https://buddhistchurchofsac.squarespace.com/new-carousel

You can use my plugin (free), use #1 and #3 code

On 12/21/2023 at 5:45 AM, tuanphan said:

You can use my plugin (free), use #1 and #3 code

 

Hi @tuanphan, I tried implementing this on my homepage but they are both still appearing on desktop and mobile. Could you let me know where I went wrong with the implementation?

https://buddhistchurchofsac.squarespace.com/home