Problem with .box-ratio on my website

Store Design
, , , ,

Topic summary

A user is experiencing issues with .box-ratio CSS on their Shopify store (dobrelegowiska.pl), where unwanted padding-bottom (approximately 30%) appears on product images despite attempts to override it with padding-bottom: 0 !important;.

Screenshots provided show:

  • The visual problem with image spacing/padding
  • Current CSS attempts to fix the issue

Proposed solution:
Another user suggests adding custom CSS code to the theme’s theme.liquid file, specifically before the closing </head> tag. The solution involves:

  1. Navigating to Shopify Admin → Online Store → Themes
  2. Clicking Edit code on the active theme
  3. Locating the end of the head tag in theme.liquid
  4. Inserting provided CSS code

Status: The discussion remains open, as the specific CSS fix code was not fully displayed in the response. The issue appears unresolved pending implementation of the suggested solution.

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

Hello,

Screenshot_272.jpg
Screenshot_272.jpg1265×575 65.6 KB

Screenshot_271.jpg
Screenshot_271.jpg707×354 21.2 KB

Screenshot_270.jpg
Screenshot_270.jpg365×250 8.16 KB

On my website: https://dobrelegowiska.pl/ i have problem with .box-ratio. I try to fix it with CSS like this but still i can’t remove this padding bottom 30% or something.

.box-ratio {
padding-bottom: 0 !important;
}

.box-ratio img {
width: 100%;
height: auto;
}

Please help me :slightly_smiling_face:

2

Please follow this guide:
a. Goto Shopify Admin → Online Store → Themes
b. On your current theme, click … → Edit code
c. Follow 1 → 2 → 3 to search end of head tag

theme-liquid.png
theme-liquid.png1794×907 95.5 KB

d. Add follow code, it can be fix your problem