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

On 6/11/2024 at 1:50 AM, mariaavecchi said:

Thank you so much, tuanphan!!  

 

It worked but the images' frames are still on the mobile version, occupying their spaces. And when I delete them, they disappear on the desktop version... Could you please help?  

With your case, will need to change a bit layout on mobile to achieve this. Can you let me know which exact images you want to remove on mobile? I will adjust and give you new code

OK, thank you.  If you enter the site/mobile version, you will see that the last images desappeared like we wanted. But thier frames are still there (that frame sayng: image).

I would take these out:

#block-8c47d91736810cffc7e5 (image)

#block-331a7886e821a5327e29 (subtitle)

#block-92eb43d1107664c91aef (image)

#block-8d546c72e459fd89267f (subtitle)

#block-848bc2c19a282a429dde (image)

#block-848bc2c19a282a429dde (subtitle)

But please tell me what you did in case in the future I want to change the images, ok? Thank you!!

I also have another problem:

at the top of my site there is a gallery which keeps changing the image. On the desktop version the image sizes and clips are ok. But on the mobile version, some images appear too big (with a close up) and need adjustment. Thank you!

On 6/13/2024 at 10:12 PM, mariaavecchi said:

OK, thank you.  If you enter the site/mobile version, you will see that the last images desappeared like we wanted. But thier frames are still there (that frame sayng: image).

I would take these out:

#block-8c47d91736810cffc7e5 (image)

#block-331a7886e821a5327e29 (subtitle)

#block-92eb43d1107664c91aef (image)

#block-8d546c72e459fd89267f (subtitle)

#block-848bc2c19a282a429dde (image)

#block-848bc2c19a282a429dde (subtitle)

But please tell me what you did in case in the future I want to change the images, ok? Thank you!!

I also have another problem:

at the top of my site there is a gallery which keeps changing the image. On the desktop version the image sizes and clips are ok. But on the mobile version, some images appear too big (with a close up) and need adjustment. Thank you!

https://dalmatian-tomato-n9s7.squarespace.com/?noredirect

Use this new CSS code

@media screen and (max-width:767px) {
    #block-8c47d91736810cffc7e5, #block-331a7886e821a5327e29, #block-92eb43d1107664c91aef, #block-8d546c72e459fd89267f, #block-848bc2c19a282a429dde, #block-848bc2c19a282a429dde {
    display: none !important;
}
[data-section-id="6616f27b5a0700917a92ec7d"] {
    .fluid-engine>div {
    grid-area: unset !important;
    display: block !important;
    width: 100% !important;
    margin-bottom: 20px;
}
.fluid-engine {
    display: block !important;
    padding-left: 6vw;
    padding-right: 6vw;
}
.fluid-engine .sqs-block-image .design-layout-fluid * {
    position: relative !important;
    width: 100% !important;
}
.fluid-engine .sqs-block-image .design-layout-fluid .fluid-image-container .content-fill img {
    position: static !important;
    object-fit: cover !important;
}
.fluid-engine {
    padding-top: 100px;
}}}

@tuanphan I used the code linked in your blog (thank you!) but although it worked in the editor view, it didn't work in the external view. I'm only trying to target  a single section so I don't think I need the HTML code anyway, but I can't get the CSS to work.

I created two sections in order to have two different background images, and I want one to show on mobile and one on desktop. It is working on and off, but I can't get both mobile and desktop to hide consistently.

This is my code:

@media screen and (min-width: 768px) {
    #section[data-section-id="6672853b520cfe46f40dbbfe"].hide-on-mobile {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    #section[data-section-id="6672853b520cfe46f40dbc01"].hide-on-desktop {
        display: none !important;
    }
}

esperanzacommunityhousing.org/schtest

pass: sqs

Hi, @tuanphan. It worked!!! Thank you!

But new issues appeared:

On the mobile version, a space right below the button "Get in touch!" + the line of text, and the first image (#block-6616f27bb6436dcd54df26a7).

The caption #block-6616f27b026461203d981e56 is not in the right place (below #block-6616f27bb418799528c7e218), it's below #block-6616f27ba3399421ad25ae93 and on top of #block-6243a8731388125bb092. 

The line (#block-yui_3_17_2_1_1715277760206_23440) which separates the images and my photo, changed place too:  it's now between #block-57a47046407e5d9684b8 and its caption #block-e6fb62f8a9374a7dd772.

Btw, on the mobile version, if I click on edit section, the grid behind the images (I had upgraded this section) looks different now. It has vertical stripes intead of showing the rectangles. 

Thank you!!

On 6/19/2024 at 2:23 PM, ForestFern said:

@tuanphan I used the code linked in your blog (thank you!) but although it worked in the editor view, it didn't work in the external view. I'm only trying to target  a single section so I don't think I need the HTML code anyway, but I can't get the CSS to work.

I created two sections in order to have two different background images, and I want one to show on mobile and one on desktop. It is working on and off, but I can't get both mobile and desktop to hide consistently.

 

This is my code:

@media screen and (min-width: 768px) {
    #section[data-section-id="6672853b520cfe46f40dbbfe"].hide-on-mobile {
        display: none !important;
    }
}

@media screen and (max-width: 767px) {
    #section[data-section-id="6672853b520cfe46f40dbc01"].hide-on-desktop {
        display: none !important;
    }
}

esperanzacommunityhousing.org/schtest

pass: sqs

Follow this instead

Hey, I'm working on my client's website. I designed a background but on mobile version it doesn't work. I'd like to hide the "Experiences" background only on Mobile. Can someone help me?

Website: https://turbot-elephant-gj7r.squarespace.com/config/

Password: 1234ciao

@Simone1998 If you just want to remove the background of that section from mobile, then use this:

#collection-663c997cd6956c03414b66d6 {
 @media only screen and (max-width:640px){
  #page .page-section:nth-child(1) .section-background img {
    opacity:0;
  }

However, if you want to replace that background with another background for mobile, then follow this post - https://www.jessicamiller.work/blog/how-to-replace-a-background-image-for-mobile

9 hours ago, JessicaM said:

@Simone1998 If you just want to remove the background of that section from mobile, then use this:

#collection-663c997cd6956c03414b66d6 {
 @media only screen and (max-width:640px){
  #page .page-section:nth-child(1) .section-background img {
    opacity:0;
  }

However, if you want to replace that background with another background for mobile, then follow this post - https://www.jessicamiller.work/blog/how-to-replace-a-background-image-for-mobile

Hi Jessica, thanks for the quick reply. Unfortunately it doesn't seem to work 😞

I attach a screenshot, as you can see the background remain visible on mobile version.

@Simone1998 

1. This is a different section than the Experiences background... do you want the Strategy background removed too? It will take a different set of code.

2. There's an error message in your code that says a parentheses is missing somewhere.

3. For the code at the top of your CSS, you can remove the <style> & </style> tags.

Feel free to send me a DM.

Hi there,

Trying to show a different image on desktop vs. mobile. Site is http://gettough.app pwd: `theideaworks`. Section is:

section[data-section-id="66952fccc85676482719d347"]

I'd like to use `Tough-mind-isometric-mock.jpeg` on desktop and `Tough-mind-isometric-mock-portrait.png` on mobile. Can't quite work out the CSS. Any help gratefully received!

Thanks

OK, I managed to make it work by showing/hiding the various elements using `@media screen` etc., but now my in-page links are a bit skewed. It seems that by hiding sections, the anchor links are all offset. Any idea how to fix this? Thanks

@PMRUK For starters, the anchor links aren't set up correctly. You need to add a code block to the section you want the link to jump to, then point to the code in the link URL. Here is a guide - https://www.jessicamiller.work/blog/how-to-add-anchor-links

It sounds like you got the background image to work, but if it's not working like you want, you can follow this tutorial - https://www.jessicamiller.work/blog/how-to-replace-a-background-image-for-mobile

Hi, I'm also trying to have a different image on mobile and desktop. I don't just want to resize the image as I need the text to be legible. Are you able to provide the correct code? 

Site- https://icosahedron-gar-d6cc.squarespace.com/config/pages/website-tools

pwrd- Wiseheart01!! 

It's these two images- 

18 hours ago, HJCarley said:

Hi, I'm also trying to have a different image on mobile and desktop. I don't just want to resize the image as I need the text to be legible. Are you able to provide the correct code? 

Site- https://icosahedron-gar-d6cc.squarespace.com/config/pages/website-tools

pwrd- Wiseheart01!! 

It's these two images- 

Which page are you referring to?

https://icosahedron-gar-d6cc.squarespace.com/?noredirect