my store url is https://www.nextwavegadgets.com
I need help on the product page of the product ‘cozy toes’
Topic summary
Goal: reduce/removes white space between sections on the “Cozy Toes” product page on mobile and desktop, and avoid desktop image cropping on the first two image-with-text blocks.
Context: Link confirmation requested; initial view looked fine to one helper, but the merchant wants tighter spacing and uncropped images. Images and screenshots were shared but are not essential to follow the fixes.
Proposed solutions:
- Edit theme CSS file (base.css/style.css/theme.css) to set section padding to 0 for specific section variants.
- Use Theme Settings > Custom CSS to set vertical padding (padding-block) of .shopify-section.section > div to 0; optionally add a mobile-only rule (media query at max-width: 768px) to remove padding on .image-with-text__content.
- If Custom CSS throws an error, inject the same CSS directly in theme.liquid inside a style block.
Notes: “padding-block” controls vertical padding; the media query targets screens ≤768px to fine-tune mobile spacing. The image cropping concern on desktop is implied to be addressed by reducing padding on image-with-text content, but no specific image sizing rule was provided.
Status: The merchant reported an error with the Custom CSS approach; a theme.liquid workaround was provided. Awaiting confirmation; no confirmed resolution yet.
2 Likes
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
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.
Hi @bdvecom
Try this one.
- From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
- Find the theme that you want to edit and click on “Actions” and then “Edit code”.
- 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!
Hi @bdvecom
To complete your requests, please follow these steps:
- Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
- 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
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
{% 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
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