Replace background image on mobile

On 9/12/2020 at 2:20 AM, tuanphan said:

Can you setup password & share url again? We can check easier.

@tuanphan you're a legend on here, I've read a lot of your posts, thanks for taking the time to help.  

www.rubymoto.com

I've several sets of your CSS and still cant get the mobile fallback image to resize to fit on a mobile screen in portrait mode.

Also, I have dropped some code from a Shopify Buy Button at the bottom of the home page but I can sort out how to get them to center on the desktop site.  Its like they are just off center to the left.

Hi! I'm having the same issue with the banner picture, I have tried using one of the codes provided: 

@media screen and (max-width:767px) {
[data-section-id= "5ed96c308cdea2622e3ee6ac"] .section-background img {
    object-position: 60% 100%!important;
}
}

For the home banner works since it's a vertical picture but for other areas it doesn't. I'm trying for the image to not be cropped on mobile, so I guess what I need is a way of maybe get a code that readjusts the image to mobile? Anyone can help? I would greatly appreciate it! 

Website address: sarahorganica.com

On 12/18/2020 at 7:16 AM, ErikaArevalo said:

Hi! I'm having the same issue with the banner picture, I have tried using one of the codes provided: 

@media screen and (max-width:767px) {
[data-section-id= "5ed96c308cdea2622e3ee6ac"] .section-background img {
    object-position: 60% 100%!important;
}
}

 

For the home banner works since it's a vertical picture but for other areas it doesn't. I'm trying for the image to not be cropped on mobile, so I guess what I need is a way of maybe get a code that readjusts the image to mobile? Anyone can help? I would greatly appreciate it! 

Website address: sarahorganica.com

 

Add this to Home > Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-5ed96c2f8cdea2622e3ee67e #page section:first-child {
    min-height: 30vh;
    margin-top: 10vh;
}
}

Also, I see pricing images look small on Tablet. Do you want to resize it?

https://www.sarahorganica.com/entrena-conmigo

On 5/19/2020 at 5:21 AM, tuanphan said:

@media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

I have been trying to make this work on my site multiple times but I can not make it stick. I even just tried hiding the initial background image but it won't work. Any help appreciated!

Preston-wealth-advisors.squarespace.com / Preston

On 12/21/2020 at 4:36 PM, tuanphan said:

Add this to Home > Design > Custom CSS

@media screen and (max-width:767px) {
body#collection-5ed96c2f8cdea2622e3ee67e #page section:first-child {
    min-height: 30vh;
    margin-top: 10vh;
}
}

 

Hi!

I am trying to do the same thing for 2 images on my welcome page:

In mobile it looks like this:

I would like for the words to be in the blue part. Image can be longer vertically if needed. I don't mind uploading an alternate image for mobile version but I am not sure how to do that.

Second Image:

In the mobile version, only the string can be seen:

Is there a way to make the whole image be seen on mobile? if not, I don't mind the image being below the words on mobile.

Thank you so much for your help! You are so helpful in this forum!

forgot to include website details:

www.dearfamilies.com

pw: Welcome

On 3/17/2021 at 4:50 AM, vna said:

forgot to include website details:

www.dearfamilies.com

pw: Welcome

Hi. Have you solved it yet?

On 3/24/2021 at 12:44 AM, tuanphan said:

Hi. Have you solved it yet?

No, not yet. Would love some help on this!

Hi there,

Can you please help me with having a different background image on the homepage on this site?
https://conscious.org.au

Thanks

On 8/20/2021 at 7:16 AM, leyrose said:

Hi there,

 

Can you please help me with having a different background image on the homepage on this site?
https://conscious.org.au

 

Thanks

Hi, On mobile?

Resize it or add new image?

On 5/19/2020 at 12:21 PM, tuanphan said:

@media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

 

Hello!

I'm trying to just hide the background image (don't need to replace), but it seems the section is just not getting picked up by the code 😞 Can you help?

https://bird-apricots-y5tt.squarespace.com/

password: squarespace123

thanks!

Anele

15 hours ago, Anele0610 said:

Hello!

 

I'm trying to just hide the background image (don't need to replace), but it seems the section is just not getting picked up by the code 😞 Can you help?

 

https://bird-apricots-y5tt.squarespace.com/

password: squarespace123

 

thanks!

Anele

Hi,

Which section? I see video only, no image

https://bird-apricots-y5tt.squarespace.com/home

On 9/9/2021 at 3:33 AM, tuanphan said:

Hi,

Which section? I see video only, no image

https://bird-apricots-y5tt.squarespace.com/home

Hey @tuanphan!

Page example: https://bird-apricots-y5tt.squarespace.com/elon-musk

Thanks

Anele

On 9/10/2021 at 1:56 PM, Anele0610 said:

Hey @tuanphan!

 

Page example: https://bird-apricots-y5tt.squarespace.com/elon-musk

 

Thanks

Anele

Hide Elon Musk Image on mobile?

On 9/12/2021 at 5:57 AM, tuanphan said:

Hide Elon Musk Image on mobile?

The background image yes. There is an image I added as inline, that I want on mobile, to replace the background image on mobile. 

On 5/19/2020 at 5:21 AM, tuanphan said:

On 5/19/2020 at 5:21 AM, tuanphan said:

@media screen and (max-width:767px) {
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background img {
    visibility: hidden;
}
[data-section-id="5e71026ea0c7907f72f1e5a1"] .section-background {
    background-image: url(https://beaverhero.com/wp-content/uploads/2020/05/ss-team01-min.png);
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
}
}

 

Hi @tuanphan. I am attempting to hide a landscape oriented scrolling gallery on mobile and replace with a single portrait oriented image on mobile only. I believe this is close to what I would need, but I can't seem to change the code target the gallery. Any help would be appreciated. 

site url: https://bellflower-swan-fhe9.squarespace.com/

pass: deena1

Thank you in advance. 

On 3/6/2022 at 4:36 AM, zacht said:

 

Hi,

Which gallery are you referring to? Can you take a screenshot? Thank you.

On 3/10/2022 at 2:01 AM, tuanphan said:

Hi,

Which gallery are you referring to? Can you take a screenshot? Thank you.

Hello @tuanphan thanks so much for the reply. Sorry for the confusion. I am referring to the top of the home page. I've attached a screenshot below. 

On 3/12/2022 at 12:30 AM, zacht said:

Hello @tuanphan thanks so much for the reply. Sorry for the confusion. I am referring to the top of the home page. I've attached a screenshot below. 

It looks like you solved by reduce slide height on mobile with this code?

@media screen and (max-width: 767px) {
    [data-section-id="62194590a808f0248c742cc1"] {
        min-height:unset !important;
        height: 86vh;
        margin-top: 0vh
    }
}

On 3/13/2022 at 7:27 PM, tuanphan said:

It looks like you solved by reduce slide height on mobile with this code?

@media screen and (max-width: 767px) {
    [data-section-id="62194590a808f0248c742cc1"] {
        min-height:unset !important;
        height: 86vh;
        margin-top: 0vh
    }
}

 

@tuanphan yes I was able to find a workaround, thank you. My original plan was to hide the entire gallery and replace it with a single image on mobile only. 

@tuanphan You are amazing for helping everyone thus far! I tried used the code to make the banner images (I believe it's called headlines) not crop vertically on mobile but it doesn't seem to work... The banner I'm referring to is... https://www.estherypak.com/soulcycleeqx the first image that appears. 

Thank you so much for your help in advance! 

On 5/11/2022 at 2:35 AM, NeedHelp123 said:

@tuanphan You are amazing for helping everyone thus far! I tried used the code to make the banner images (I believe it's called headlines) not crop vertically on mobile but it doesn't seem to work... The banner I'm referring to is... https://www.estherypak.com/soulcycleeqx the first image that appears. 

Thank you so much for your help in advance! 

Add to Design > Custom CSS

/* Mobile - Soulcycleeqx */
@media screen and (max-width:767px) {
[data-section-id="6262bac5befc10189ab372cf"] {
    min-height: unset !important;
    height: 35vh;
}}

Can someone help me do this with my background images on mobile only? Specifically for the top portion of my "work page", the way the images are alligned under My Work, and  the images in "about me".

https://www.paigerusselldesign.com/

Since I imported files from figma as backgrounds, these are rendering super weirdly alligned on mobile. I am just wanting to make sure the images are not overlapping with the wordings.

Thank you for reading! I would be eternally grateful for any help.