Jump to content

Make images full bleed when shown on a mobile

Recommended Posts

Add to Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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!

Link to comment
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;}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

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

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

IMG_6702.jpeg

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

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

×
×
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.