Make images full bleed when shown on a mobile

Site URL: http://anjaemzen.com/

Hi!

I was wondering if it's possible to add custom CSS to my Squarespace site, so that all the images are full-bleed when shown on mobile devices? And if yes, what CSS code do I need to add?

Thanks a lot, I really appreciate it!

All the best,
Anja

Add to Design > Custom CSS

@media screen and (max-width:767px) {
main#page {
    padding-left: 0px;
    padding-right: 0px;
}
}

Thank you so much for your answer @tuanphan! ☺️

It worked for the images, even though they wouldn't stay in place if I moved my finger sideways on the screen. But what also happened was that all the left aligned text on the website also turned full-bleed. For the text I would love to keep the margin. Do you know is this is possible, plus making the images stay in place? Like on this site if you look at it on a mobile: https://lottanieminen.com/index/eadem

Thanks a lot again!

On 2/20/2022 at 3:07 AM, anjaemzen said:

Thank you so much for your answer @tuanphan! ☺️

It worked for the images, even though they wouldn't stay in place if I moved my finger sideways on the screen. But what also happened was that all the left aligned text on the website also turned full-bleed. For the text I would love to keep the margin. Do you know is this is possible, plus making the images stay in place? Like on this site if you look at it on a mobile: https://lottanieminen.com/index/eadem

Thanks a lot again!

Try this new code

@media screen and (max-width:767px) {
main#page {
    padding-left: 0px;
    padding-right: 0px;
}
}
html, body {overflow-x:hidden;}

Thank you again @tuanphan!

Now the images work perfectly, it's just the margin for the text that is still missing (see attached examples). I would like to keep the margin as it is originally in mobile view. Do you think that's possible?

Thank you so much for your help!!

Like this (regarding margins for the text) @tuanphan 🙂

On 2/24/2022 at 2:57 PM, anjaemzen said:

Like this (regarding margins for the text) @tuanphan 🙂

Just checked & looks fine to me. Can you share link to page in screenshot?

The margins for the text is correct as it is, but I'd love for all the images to be full bleed in mobile version. When I tried your code the margins for the text also disappeared @tuanphan

http://anjaemzen.com/framkalla

On 2/28/2022 at 5:06 PM, anjaemzen said:

The margins for the text is correct as it is, but I'd love for all the images to be full bleed in mobile version. When I tried your code the margins for the text also disappeared @tuanphan

http://anjaemzen.com/framkalla

can't make it fullbleed, you can add this CSS to remove some space on left/right of images

@media screen and (max-width:640px) {
body#collection-60219bd41962f40812f492ca .image-block {
    padding-left: 0 !important;
    padding-right: 0 !important;
}
}

Thank you @tuanphan! 🙂

Hello, I am having the same issue with my home page. I would like all the images to bleed off the page but the text to stay as is.

https://marshandco.com/

On 2/20/2023 at 12:51 AM, Gazmozmarsh said:

Hello, I am having the same issue with my home page. I would like all the images to bleed off the page but the text to stay as is.

https://marshandco.com/

 

Add to Design > Custom CSS

div#block-yui_3_17_2_1_1676723424189_16831 {
    width: 100vw;
    left: 50%;
    transform: translateX(-50%);
}
body {
    overflow-x: hidden;
}