Modular Theme Image with text section - padding

Store Design
, , ,
1

Hello everyone

I am using Shopify theme ‘Modular’ and it contains a section named ‘image-with-text’

I have 3 stacked on each other with alternating image sides (left, right, left)

There is padding between each section and as a result the sections don’t touch and leave a visible gap between each images corner.

Is there a way to remove the padding to make the sections touch one another?

Thank you so much!!

Screenshot 2023-02-17 at 10.26.54 pm.png
Screenshot 2023-02-17 at 10.26.54 pm.png1966×354 269 KB

2

Hi @jr-rl ,

Please share your store URL and if your store is password protected then please provide password too.

So that we can help you.

Thank you.

3

To remove the padding between the “image-with-text” sections in the “Modular” Shopify theme, you can try the following steps:

  1. From your Shopify admin, click on “Online Store” and then click on “Themes”.
  2. Find the “Modular” theme and click on “Customize”.
  3. In the left-hand menu, click on “Sections” and then click on the “image-with-text” section that you want to modify.
  4. Click on the “Settings” tab and scroll down to the “Spacing” section.
  5. You will see a set of options for adjusting the spacing between elements in the section. Set the values to “0” or remove the values entirely to remove the spacing.
  6. Click “Save” to apply the changes to the section.

Once you have removed the padding, the “image-with-text” sections should touch each other without any visible gaps.

If you want to remove the padding for all the “image-with-text” sections in the theme, you can follow the above steps for each section individually or edit the theme’s code to remove the padding globally. However, editing the theme’s code requires advanced knowledge of HTML, CSS, and Liquid, so I would recommend contacting a Shopify expert or the theme’s developer for assistance if you’re not comfortable with code customization.

To remove the padding between the “image-with-text” sections in the “Modular” Shopify theme, you can add the following CSS code to your theme:

  1. From your Shopify admin, click on “Online Store” and then click on “Themes”.
  2. Find the “Modular” theme and click on “Actions” > “Edit Code”.
  3. In the left-hand menu, click on “Assets” and then click on the “theme.scss.liquid” file to open it.
  4. Scroll to the bottom of the file and add the following CSS code:

css

.image-with-text { margin-top: 0; margin-bottom: 0; }

  1. Click “Save” to apply the changes to your theme.

This will remove the top and bottom margin from all “image-with-text” sections in your “Modular” theme. If you want to remove only the margin between specific sections, you can use their section IDs to target them individually. For example:

css

#shopify-section-1569948826938 { margin-bottom: 0; } #shopify-section-1569948826939 { margin-top: 0; margin-bottom: 0; } #shopify-section-1569948826940 { margin-top: 0; }

Replace the section IDs in the above code with the IDs of the “image-with-text” sections that you want to modify. You can find the section IDs by inspecting the elements in your web browser’s developer tools.