code - what did i do wrong steps

Store Design
, , ,

Topic summary

A user is attempting to remove unwanted vertical spacing on a product page by modifying the main-product.liquid file. They added inline CSS (margin-top: 0; padding-top: 0;) to a <div> element but the spacing persisted.

Key Issue:

  • The modification targeted a yellow-highlighted section in browser DevTools but did not resolve the spacing problem.

Follow-up Question:

  • The user is now uncertain which HTML element is causing the gap when multiple elements are stacked vertically (as shown in their second screenshot).
  • They’re seeking guidance on troubleshooting methodology: how to systematically identify which element or CSS rule is responsible for unwanted spacing between components.

The discussion remains open with no responses yet. Screenshots are included showing the DevTools inspection process.

Summarized with AI on October 28. AI used: claude-sonnet-4-5-20250929.
1

Hi so i am trying to learn here - inspected the element and found it was the main product liquid that controlled it so added the code in bold below to that section

**

it was the section yellow - it never worked and wonder why ? this was the url - https://kitout-fitness.co.uk/products/customizable-mockup-ladies-racerback-cropped-tank-top?variant=52036624482633#product-modal what steps would you of taken to solve and identify the relevant section that needed changing thanks shane

Screenshot 2025-05-19 143650.jpg
Screenshot 2025-05-19 143650.jpg1567×582 48.6 KB

2 Likes
2

TBH

TBH i think im going in the wrong place as you can see below 2 elements when space is inbetween elements like this - how do you find out as part of problem solving and solution which one is causing that space thanks

Screenshot 2025-05-19 145927.jpg
Screenshot 2025-05-19 145927.jpg1582×674 89.2 KB