How can I eliminate margins and padding on a Publisher product page?

Store Design

Topic summary

A user seeks to remove top and bottom margins/padding from their product page in the Publisher theme.

Proposed Solutions:

  • PageFly-Victor suggests adding custom CSS code to the theme’s base.css file targeting mobile slider elements with margin-top: 0 !important and margin-bottom: 0 !important properties
  • The code should be inserted at the bottom of Online Store → Theme → Edit code → Asset → base.css

Root Cause Identified:
After reviewing the shared store URL (password-protected), contributors determined the spacing issue stems from inconsistent product image sizes. The page displays using the minimum height of the largest image, creating unwanted gaps.

Recommended Fix:
Update product images to ensure uniform dimensions and sizing for consistent display across the page.

Status: The discussion remains open with both a CSS workaround and a content-based solution provided, but no confirmation of implementation or resolution from the original poster.

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

Hi @Freddy2703

This is Victor from PageFly - Landing Page Builder App

You can try this code by following these steps:

-Go to Online Store->Theme->Edit code

-Asset-> base.css paste the below code at the bottom of the file.

@media(max-width:767px){

.slider.slider–mobile{

padding-top:0 !important;

padding-bottom:0 !important;

}

}

Or

@media(max-width:767px){

.slider.slider–mobile{

margin-top:0 !important;

margin-bottom:0 !important;

}

}

Hope my solution works perfectly for you!

Regards,

Victor | PageFly