Solved

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

Verterra
Excursionist
28 1 5

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

 

Screenshot 2024-05-15 at 12.16.59 PM.png

 

Thanks!

Accepted Solutions (3)
Verterra
Excursionist
28 1 5

This is an 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? 

 

Screenshot 2024-05-15 at 1.35.56 PM.png

View solution in original post

swym
Explorer
55 4 21

This is an 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: 

 

swym_0-1715868560590.png

 

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

 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries

View solution in original post

swym
Explorer
55 4 21

This is an 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

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries

View solution in original post

Replies 22 (22)

PageFly-Richard
Shopify Partner
4322 980 1639

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 

PageFlyRichard_1-1715748381505.png

 

 

Then drag the padding to 0 for top and bottom 

 

Hope this can help you solve the issue 

 

Best regards,

Richard | PageFly 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

Verterra
Excursionist
28 1 5

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. 

Screenshot 2024-05-15 at 1.32.53 PM.png

Verterra
Excursionist
28 1 5

Sorry, I attached the wrong image previously. This image shows the padding @ 0 but there are still spaces inbetween the rows. Screenshot 2024-05-15 at 1.35.56 PM.png

swym
Explorer
55 4 21

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.

 

swym_0-1715748230947.png

 

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:

swym_1-1715748896983.png

 

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

swym_2-1715749285037.png

 

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:

swym_3-1715749406563.png

 

 

I hope this helps!

Regards,
Abhishek from Swym 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Verterra
Excursionist
28 1 5

This is an 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? 

 

Screenshot 2024-05-15 at 1.35.56 PM.png

swym
Explorer
55 4 21

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

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Verterra
Excursionist
28 1 5

Hi Abhishek, 

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

Thank you!

swym
Explorer
55 4 21

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: 
Screenshot 2024-05-15 at 11.16.19 AM.png

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Verterra
Excursionist
28 1 5

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
Explorer
55 4 21

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: 

swym_0-1715752552794.png

 

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

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Verterra
Excursionist
28 1 5

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
Explorer
55 4 21

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. 
swym_0-1715754927827.png

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

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



  

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Verterra
Excursionist
28 1 5

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! 

Verterra_0-1715841560533.png

Verterra_1-1715841581808.png

 

 

swym
Explorer
55 4 21

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

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Verterra
Excursionist
28 1 5

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. 

Verterra_0-1715867832700.png

 

swym
Explorer
55 4 21

This is an 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: 

 

swym_0-1715868560590.png

 

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

 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Verterra
Excursionist
28 1 5

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

swym
Explorer
55 4 21

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 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Verterra
Excursionist
28 1 5

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. 

Verterra_0-1716782404994.png

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!

Verterra_1-1716782501646.png

 

 

swym
Explorer
55 4 21

This is an 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

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries
Verterra
Excursionist
28 1 5

Thank you, this worked well for me! 🙂 

swym
Explorer
55 4 21

Hey @Verterra

Thanks for confirming that this solution worked😊

 

Regards,
Abhishek from Swym 

- Appreciate the assistance. Show your approval with a Like! And when your question finds its answer, seal the deal by marking it as an Accepted Solution!
- Our Solutions: Wishlist Plus | Swym Back in Stock Alerts | Swym Gift Lists and Registries