Remove Padding/Margins from Rows of Image with Text Dawn Theme

[Verterra]

Hi, 

I am currently trying to remove the white spaces between the different 'image with text' sections that I have stacked on my page. Any suggestions on how to do so? My website is using the dawn theme and the preview link is:  https://verterra.sg/?_ab=0&_fd=0&_sc=1

Thanks!

[Verterra · Accepted solution]

Hi Abhishek,

Thank you for your really detailed reply, I appreciate it! However I tried to apply the changes, but when I navigate to custom, the padding is already at 0, but there is still space in between the rows. May I check if you have any advice for this? 

[swym · Accepted solution]

Hey @Verterra, 

I did debug this issue that you are facing now. The reason is, that your theme files have this code that I shared below: 

.section + .section {
    margin: 0 !important;
}

Which is overriding the default CSS code. See screenshot: 

If you can remove this piece of CSS code from your theme, this will fix the issue of the margin spacing not being visible on mobile devices. 

If you are unable to locate it, an alternative solution is to add the following code at the bottom of the theme.liquid file, just before the closing body tag (</body>). This will override the existing code and ensure that the sections have margin spacing from the top.

<style>
@media only screen and (max-width: 767px){
  .section + .section {
    margin-top: var(--spacing-sections-mobile) !important;
  }
}
</style>

Hope this helps! 

Regards, 

Abhishek from Swym

[PageFly-Richard]

Hi @Verterra 

This is Richard from PageFly - Shopify Page Builder App

Please add this code to your theme.liquid above the </head> to get this solved

Step 1: Online Stores > Themes > More Actions > Edit code

Step 2: click on theme.liquid and paste the code above the </head>

{% if template contains 'index' %}
<style>
    #MainContent .section + .section {
        margin-top: 0;
    }
</style>
{% endif %} 

Then you can navigate to Theme Customize > Select those image with text sections 

Then drag the padding to 0 for top and bottom 

Hope this can help you solve the issue 

Best regards,

Richard | PageFly 

[Verterra]

Hi Richard, 

Thank you for this! Unfortunately I copied in the code as shown, but when I navigate to the custom page, the padding is already @ 0 but it still has the spacing. 

[Verterra]

Sorry, I attached the wrong image previously. This image shows the padding @ 0 but there are still spaces inbetween the rows. 

[swym]

Hey @Verterra, 

It's good practice to create a copy of your theme and work on that to preview the changes before applying, especially if you are editing the raw code. Alternatively, you can also use the Shopify theme editor’s versions to revert to previous versions, but it is not recommended if you are making multiple changes.

Now to answer your specific question about removing the spacing between the image-with-text sections, kindly follow the steps outlined below:

1. Open the code editor, as shown in the screenshot below.

2. Please open the file named 'image-with-text.liquid' located within the 'sections' folder. If you have trouble finding it, feel free to use the search function.

3. Add the below code to the file, just before the line {% endstyle %}, and save the file. 

  #shopify-section-{{ section.id }}, #shopify-{{ section.id }}{
    margin-block: 0; 
  }

See the screenshot below:

 4. Now open the customization settings, and update the section padding as per your store's requirement. 

5. Done? Now save the changes, and try previewing to confirm if the changes work for you.  In the reference above, it looks something like below:

I hope this helps!

Regards,
Abhishek from Swym 

[Verterra · Accepted solution]

Hi Abhishek,

Thank you for your really detailed reply, I appreciate it! However I tried to apply the changes, but when I navigate to custom, the padding is already at 0, but there is still space in between the rows. May I check if you have any advice for this? 

[swym]

hey @Verterra, 

Thanks for bringing this up. 

Are you making changes to a duplicate theme? If yes can you please share the new preview URL I tried to check with the URL you shared earlier and I was not able to see any changes. 

Regards, 

Abhishek from Swym

[Verterra]

Hi Abhishek, 

Yes, this is the link: https://verterra.sg/?_ab=0&_fd=0&_sc=1

Thank you!

[swym]

This is still pointing to the live site. 
Can you please navigate to the Online store > Themes > Click on the three dots (for the duplicate theme) > Right-click on the preview link > Copy link address and then share the URL?   

In that way, I will have the specific preview theme id in the URL. 
Please refer to the screenshot below: 

[Verterra]

Hi Abhishek,

Sorry about that, it's been showing the correct preview site on my computer. I've tried doing as per your screenshot, does this work?

https://verterra.sg/?_ab=0&_fd=0&_sc=1&preview_theme_id=166588514587

[swym]

Hey @Verterra, 

Thanks for sharing the updated preview link.  

I tried debugging the issue and found that the HTML of your image-with-text section seems to be broken. And it may be because of this the CSS is not working as expected. 

Check the screenshot below: 

If you can debug this and fix it then its all right else do let me know and I'll guide you further on how to debug this. 

Hope this helps! 

Regards, 

Abhishek from Swym

[Verterra]

Thanks Abhishek! I've tried to debug but unsure what is the issue, apologies as I have really elementary coding knowledge. Are you able to guide me? Tried adding in one more </div> at the end but not sure if that was the problem? Thank you!

[swym]

Hi @Verterra, 

Reverting to the original version of an HTML section file can often resolve issues, but it's advisable only if you haven't made significant modifications to the file, as all changes would be lost otherwise.

To revert to the original version, you can follow these steps:

1. Utilize the Shopify theme editor's versioning feature to revert to previous versions of the file. 

The second approach can be to copy and paste the file code from another Dawn theme (which does not have broken HTML) on your store to the duplicate theme.  

Hope this helps! 

Regards, 

Abhishek from Swym

[Verterra]

Hi Abhishek, 

Thank you for your help with my earlier problem. I wanted to ask if you are able to advise on the following issue. While there are no spaces between the sections on desktop, this has created a weird spacing for mobile view. Is there a way to (1) Reduce the spaces between the text and the top photo, and (2) create spaces between the text and the photo below, so that everything flows more seamlessly on mobile view? 

Thank you! 

[swym]

Hey @Verterra, 

Please update the code that I shared earlier on the section file with the code below: 

  @media only screen and (min-width: 990px){
    #shopify-section-{{ section.id }}, #shopify-{{ section.id }}{
      margin-block: 0; 
    }
  }

The updated code will ensure that CSS only applies to screen widths greater than 990px. 

Hope this helps! 

Regards, 

Abhishek from Swym

[Verterra]

Thank you! I have tried updating the code but it wasnt able to change the view for mobile. I went into the customiser screen to increase the padding from 0, but in the end it also affected the desktop view and added spaces between my images again. 

[swym · Accepted solution]

Hey @Verterra, 

I did debug this issue that you are facing now. The reason is, that your theme files have this code that I shared below: 

.section + .section {
    margin: 0 !important;
}

Which is overriding the default CSS code. See screenshot: 

If you can remove this piece of CSS code from your theme, this will fix the issue of the margin spacing not being visible on mobile devices. 

If you are unable to locate it, an alternative solution is to add the following code at the bottom of the theme.liquid file, just before the closing body tag (</body>). This will override the existing code and ensure that the sections have margin spacing from the top.

<style>
@media only screen and (max-width: 767px){
  .section + .section {
    margin-top: var(--spacing-sections-mobile) !important;
  }
}
</style>

Hope this helps! 

Regards, 

Abhishek from Swym

[Verterra]

Thank you, copying the code at the bottom of the theme editor worked!

[swym]

Hey @Verterra, 

Thanks for confirming that this solution worked😊. 

If my response helped you, please consider giving them a like (👍) and marking them as the accepted solutions if they resolved your issue. Your feedback helps other community members with similar questions.

Thank you!

Regards,
Abhishek from Swym 

[Verterra]

Hi Abhishek, 

Could I check with you if it's possible to reduce the padding on top of the words as well as there is a big gap between the words and the pictures now. 

Separately, I realise the code you provided previously also created padding between sections on other pages, when I only intended it for that section on the home page. This is because other pages now have a white gap between them when I would rather they be seamless. Example is below. Do you know how to reduce the margin for just one page without impacting the rest? Thank you!

[swym · Accepted solution]

Hey @Verterra, 

To make sure the changes only impact the homepage and not other pages, can you please replace the code that I shared before with the code given below:  

{% if template == 'index' %}
  <style>
    @media only screen and (max-width: 767px){
      .section + .section {
         margin-top: var(--spacing-sections-mobile) !important;
      }
      .image-with-text__content { 
         padding-top: 2rem; // You can modify this number to update the gap between image and text content.   
      }
     }
  </style>
{% endif %}

Hope this helps! 

Regards, 

Abhishek from Swym

[Verterra]

Thank you, this worked well for me! 🙂 

[swym]

Hey @Verterra, 

Thanks for confirming that this solution worked😊. 

Regards,
Abhishek from Swym