Focal Theme | Want to Remove Wanted Spaces and Padding in the Product Pages

Store Design
, , , , , , , , , , , , , ,

Topic summary

A user seeks help removing unwanted padding and spaces around product page images in their Focal theme, and wants to increase image sizes on both product and collection pages.

Proposed Solutions:

Multiple respondents provided CSS code snippets to address the padding issues:

  • Solution 1: Add code to theme.liquid file before the </head> tag
  • Solution 2: Insert CSS targeting .product__media-item and .product.product-thumbnails-bottom classes into theme.css file
  • Solution 3: Add simplified CSS (.product__media-item { padding: 0 !important; }) to the bottom of theme.css file in Assets

Current Status:

The user implemented one solution but reports it requires multiple page refreshes to fully load, indicating the issue remains unresolved. The discussion appears ongoing with no confirmed working solution yet.

Summarized with AI on November 16. AI used: claude-sonnet-4-5-20250929.
1

Hi,

Please help to remove unwanted padding and spaces arround product page pictures.

also please help to increase the image sizes of the products in products in the collection pages.

WhatsApp Image 2023-09-15 at 11.20.18 AM.jpeg
WhatsApp Image 2023-09-15 at 11.20.18 AM.jpeg740×1600 87.2 KB

2

Please go to

  1. Online store
  2. Themes → Edit theme
  3. Layout
  4. theme.liquid and paste this code before
3

Hi @shivamnew

This is Henry from PageFly - Landing Page Builder App

You can try this code by following these steps:

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file theme.css

Step 3: Paste the below code at bottom of the file → Save

@media screen and (max-width: 767px){

.product.product–thumbnails-bottom {
margin-top: 0 !important;

}

.product__media-item {

padding-left: 0 !important;

padding-right: 0 !important;

}}

Hope that my solution works for you.

Best regards,

Henry | PageFly

4

i implemented the code but it taking time to load

mean after multiple refreshes it in full

5

Hello @shivamnew

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->theme.css>Add this code at the bottom.

.product__media-item {
    padding: 0 !important;
}