Different Banner Image on Mobile

Hey, 

I'm having the same issue, please could someone help me with a code for this gallery section on my site. It looks perfect on desktop but zooms in on mobile, I just want it to not zoom in. 

Thanks,

Coral

On 9/27/2021 at 2:46 AM, CoralDerfurt said:

Hey, 

I'm having the same issue, please could someone help me with a code for this gallery section on my site. It looks perfect on desktop but zooms in on mobile, I just want it to not zoom in. 

Thanks,

Coral

Hi,

Can you share site url? We can help easier

www.scrunchme.co.uk site password is hello

On 9/29/2021 at 2:34 AM, CoralDerfurt said:

www.scrunchme.co.uk site password is hello

Add to Design > Custom CSS

/* Resize mobile banner */
@media screen and (max-width:767px) {
[data-section-id="6151fe5467f3dc22b6e908f7"] {
    min-height: unset !important;
    height: 35vh;
}
}

On 10/2/2021 at 6:10 PM, tuanphan said:

Add to Design > Custom CSS

/* Resize mobile banner */
@media screen and (max-width:767px) {
[data-section-id="6151fe5467f3dc22b6e908f7"] {
    min-height: unset !important;
    height: 35vh;
}
}

 

HI @tuanphan, thank you for this code. I've used it on my home page but still cant make the image to be widht 100% on mobile, Can you please help?

URL: www.gastonduflos.com . It's thefirst banner image

1 hour ago, GastonDuflos said:

HI @tuanphan, thank you for this code. I've used it on my home page but still cant make the image to be widht 100% on mobile, Can you please help?

URL: www.gastonduflos.com . It's thefirst banner image

I see you used different code, not my code

Remove your code & use this code

@media only screen and (max-width: 767px) {
    [data-section-id="657f778af1a704689bdfd139"] {
        min-height: unset !important;
        height: 30vh !important;
    }
}

2 hours ago, tuanphan said:

I see you used different code, not my code

Remove your code & use this code

@media only screen and (max-width: 767px) {
    [data-section-id="657f778af1a704689bdfd139"] {
        min-height: unset !important;
        height: 30vh !important;
    }
}

THANKS @tuanphan. It worked but only when using INSET. If I use FULL WIDHT option, the images is croped. Any idea why this happen?

12 minutes ago, GastonDuflos said:

THANKS @tuanphan. It worked but only when using INSET. If I use FULL WIDHT option, the images is croped. Any idea why this happen?

also @tuanphan I just found out that it looks ok on the mobile preview of squarespace but it doesnt look good on the actual mobile:

URL: www.gastonduflos.com

On 12/18/2023 at 10:58 AM, GastonDuflos said:

also @tuanphan I just found out that it looks ok on the mobile preview of squarespace but it doesnt look good on the actual mobile:

URL: www.gastonduflos.com

 

 

You can set margin top code. I think header overlap section abit

@media only screen and (max-width: 767px) {
    [data-section-id="657f778af1a704689bdfd139"] {
        min-height: unset !important;
        height: 30vh !important;
		margin-top: 5vh !important;
    }
}

20 hours ago, tuanphan said:

You can set margin top code. I think header overlap section abit

@media only screen and (max-width: 767px) {
    [data-section-id="657f778af1a704689bdfd139"] {
        min-height: unset !important;
        height: 30vh !important;
		margin-top: 5vh !important;
    }
}

 

Thank you @tuanphan. I updated the code but still with no luck. I think the problem is not with the header section but with the banner section itself. This is how it looks on my Iphone:

URL: www.gastonduflos.com

22 minutes ago, GastonDuflos said:

Thank you @tuanphan. I updated the code but still with no luck. I think the problem is not with the header section but with the banner section itself. This is how it looks on my Iphone:

 

URL: www.gastonduflos.com

The banner image looks fine. What is problem now? If you mean white space between header - image, you can reduce number in margin top

21 hours ago, tuanphan said:

The banner image looks fine. What is problem now? If you mean white space between header - image, you can reduce number in margin top

Thanks @tuanphan. The image doesnt look fine, its cropped on mobile. Please see images attached below to see thats there is at least a 30% of the height image been cropped on mobile. 

The image on desktop is 100%. 

On 12/21/2023 at 2:06 PM, GastonDuflos said:

Thanks @tuanphan. The image doesnt look fine, its cropped on mobile. Please see images attached below to see thats there is at least a 30% of the height image been cropped on mobile. 

The image on desktop is 100%. 

Change to 40vh