I need help from someone to remove all the white spaces in-between sections on mobile and desktop

[bdvecom]

my store url is https://www.nextwavegadgets.com

I need help on the product page of the product 'cozy toes'

[DaisyVo]

Hi @bdvecom 

Could you confirm if this is the correct link?

https://nextwavegadgets.com/products/cozytoes-usb-feet-warmer

If so, could you clarify which part needs to be removed? From what I can see, everything appears to be working fine. 😊

Best,

Daisy

[bdvecom]

This margin needs to be smaller, but i already changed the bottom to 0px but even smaller. Also, when you check desktop view, the first 2 images with text are a little bit cropped which i dont want i want the original picture like mobile one.

 

[DaisyVo]

Hi @bdvecom 

To complete your requests, please follow these steps:

1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
2. Paste the code provided into the Custom CSS section.

.shopify-section.section > div {
    padding-block: 0 !important;
}

Before: https://prnt.sc/nn76EgIBGouJ
After : https://prnt.sc/KVNiu97Zhaiz 

If you want to reduce even more like this https://prnt.sc/jvzU-bljjguG  please use this code 

@media screen and (max-width: 768px){
.image-with-text__content {
    padding-block: 0 !important;
}
}

I hope this helps

Best,

Daisy

[bdvecom]

it says this error 

[DaisyVo]

HI @bdvecom 

Please try this way

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code
Step 2: Search file theme.liquid
Step 3: Insert this code above </head>

{% style %}
.shopify-section.section > div {
    padding-block: 0 !important;
}
@media screen and (max-width: 768px){
.image-with-text__content {
    padding-block: 0 !important;
}
}
{% endstyle %}

I hope this helps

Best,

Daisy

[DaisyVo]

Hi @bdvecom 

Is everything working well with the code. If yes, please let us know if our reply is helpful by giving it a Like or marking it as a Solution!

Best,

Daisy

[Made4uo-Ribe]

Hi @bdvecom 

Try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.shopify-section.section:has(.gradient.color-accent-1, .gradient.color-background-2) * {
    padding-top: 0px;
    padding-bottom: 0px;
}

• And Save.
• Result:
• 

 Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better!