Remove Padding On Image With Text and Custom Content

[jn10]

Hi - I need some assistance removing all the padding on images in image-with-text and custom content.

The site homepage is https://cartolinanantucket.com/

here is what we want it to look like: https://www.dropbox.com/scl/fi/1az3anjoauwpwrfwpup7p/CARTOLINA-WEBSITE_FALL_10.17.24.pdf?rlkey=hfkgl...

Thank you!

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
#shopify-section-template--17741137805467__image_with_text_fMNKVy .container,
#shopify-section-template--17741137805467__custom_row_WrPHMr .container{
  padding: 0 !important;
}
#shopify-section-template--17741137805467__custom_row_WrPHMr.flexible-layout .column{
   padding-left: 0 !important;
   margin-bottom: 0 !important;
}
.shopify-section.section-image-with-text .image-overlap {
   max-width: unset !important;
}
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[AnneLuo]

Hi, @jn10 

I can help you with it. But it needs to add some custom code. If you need my help, please let me know.

[jn10]

Yes please

[AnneLuo]

It needs to add some custom code. So I need to access your store as a collaborator if possible. Please send me your collaborator code.I will help you remove the padding.

[jn10]

Is it possible to just send instructions and I can edit the code? I have dev experience but am not a full admin to give the collaborator code on this account, thank you!

[AnneLuo · Accepted solution]

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code before the </head> tag

<style>
#shopify-section-template--17741137805467__image_with_text_fMNKVy .container,
#shopify-section-template--17741137805467__custom_row_WrPHMr .container{
  padding: 0 !important;
}
#shopify-section-template--17741137805467__custom_row_WrPHMr.flexible-layout .column{
   padding-left: 0 !important;
   margin-bottom: 0 !important;
}
.shopify-section.section-image-with-text .image-overlap {
   max-width: unset !important;
}
</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[jn10]

This helped a lot! We want to have every single Image with Text to do this, can we make that happen?

Also we noticed there is still some space there, any advice?

Thank you so much

[jn10]

Hi Anne, how do make this adjustment to all the Image with Texts on the homepage and not just the first one?

Thank you!

Jr

[jn10]

I think I got it actually! Just repeated the code with the proper keyword, do you have any advice on removing the extra space that's left?

[AnneLuo]

Hi, @jn10 

Where do you refer to? Can you take a screenshot to describe your requirements?

[jn10]

Hi yes - there is still some spacing that prevents the images from bleeding to the corner on the sides and below as well:

Here is how we want it to look without any padding: https://www.dropbox.com/scl/fi/1az3anjoauwpwrfwpup7p/CARTOLINA-WEBSITE_FALL_10.17.24.pdf?rlkey=hfkgl...

[AnneLuo]

Add the code below to the same location.

<style>
.flexible-layout .column {
   padding-left: 0 !important;
   margin-bottom: 0 !important;
}
.flexible-layout {
   margin-left: 0 !important;
   margin-bottom: 0 !important;
}
.fully-spaced-row--medium {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
}
#section-id-template--17741137805467__multi_column_PCzMAb .contain {
  padding-bottom: 20px !important;
}

</style>

Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

[jn10]

Almost perfect, can we have some padding on the non image with text? this one above, so there's padding on the side of the images and on the top / bottom but all the other ones are great - thank you so much! it is the multi column section

Jr

[AnneLuo · Accepted solution]

<style>
div#section-id-template--17741137805467__multi_column_PCzMAb {
    margin: 30px 0 !important;
}
#block-id-text_block_Mrer8d,
#block-id-text_block_PTwhB9,
#block-id-text_block_HQhhwj {
   padding: 0 10px !important;
}
</style>

[jn10]

THANK YOU!