Jump to content

Remove padding around image block on mobile

Recommended Posts

I am using the Vow template. I have two image blocks beside each other. I have used the following css to remove all padding around images on desktop and tablet:


/* remove padding around all images*/
.sqs-block.image-block {
  padding: 0px !important;
}

However, when the site changes down to mobile I get gaps top and bottom on these images. Is there some CSS I can you to remove these gaps/padding?

Many thanks

Link to comment
  • Replies 6
  • Views 3.2k
  • Created
  • Last Reply

@tuanphan useDoodad195

You will see at the bottom of the first project there is a green image block with text in it on the right with anotherimage block beside it with a graphic on the left.

Thanks again

Link to comment

@harviere try this


@media screen and (max-width:640px) {
.sqs-layout .sqs-row .sqs-block:first-child {
   padding-top: 0 !important;
}
.sqs-layout .sqs-row .sqs-block:last-child {
   padding-bottom: 0 !important;
}
}


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

Contact Customer Care - Learn CSS - Buy me a coffee (thank you!)

Link to comment

@tuanphan it works perfectly! What a way to start the new day!

Very much appreciate your speedy help with this and prompting me through to the solution from my initialy question.

Best

Link to comment

Archived

This topic is now archived and is closed to further replies.

×
×
  • 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.