Trouble removing ALL padding from custom content blocks

Store Design
1

Hello. I’m having trouble:

  1. removing padding above and below custom content section

  2. removing the padding between custom content blocks inside the section itself

  3. making custom content blocks full width (all the way to the sides of the screen)

This is the link

notfriedfoods.myshopify.com

@KetanKumar can you please help?

2

@mhendawy

Please share your site URL,
I will check out the issue and provide you a solution here.

3

@mhendawy
Welcome to the Shopify community!
Thanks for your good question.

Kindly Share proper screen shot and mark it which you want to remove.
Thank you.

4

Screenshot_20220210-131651.jpg
Screenshot_20220210-131651.jpg1080×2280 281 KB

5

I would like to remove all of this padding in red

6

@Zworthkey i would like to remove this padding marked in red

site url is: notfriedfoods.myshopify.com

7

@infoatcodelab7

site url: notfriedfoods.myshopify.com

8

@mhendawy ,

Please add this CSS to your css file

main#MainContent {
    padding: 0 !important;
}
div#CustomImageWrapper--1-566941679830 div{
    padding-top: 94.4% !important;
}
div#shopify-section-1644489743e964e6cd .page-width {
    padding: 0 !important;
}

Thanks!

9

@infoatcodelab7 this solves the problem partially:

  • Side padding is still there (it is not end to end in the screen)

  • There is a difference in padding on mobile vs desktop (top/bottom padding is gone on desktop but is still there on mobile)