Remove collection page hero padding - Minimog theme

Store Design
,

Topic summary

A user seeks to remove white padding from their collection banner to make it full width on their Minimog theme store.

Two solutions were provided:

  1. Customizer approach (recommended): Add CSS code .container-full { padding: 0; } to the section’s “Custom CSS” setting in the Customizer. This method preserves theme updates and applies changes only to the specific section.

  2. Theme code editing: Insert custom CSS in the theme.liquid file above the </body> tag, targeting .container-fluid with zero padding for screens 1280px and wider. This approach may complicate future theme updates and affects all matching elements globally.

The first solution is positioned as superior because it maintains update compatibility and provides more targeted styling control without modifying core theme files.

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

I want to make the collection banner full width and remove the white padding

Screenshot 2025-07-30 at 16.56.43
Screenshot 2025-07-30 at 16.56.431920×1327 146 KB

2

In Customizer, go to this section settings and paste this code into “Custom CSS” setting:

.container-full {
  padding: 0;
}

Ok, here are the benefits of my solution compared to the next one:

  1. When you edit your theme code, you make it problematic to update to a newer version of the theme as Shopify will ignore your edits. The settings will be transferred without problems.
  2. When you use “Custom CSS” section setting, the code will apply to this section only. CSS rules added inside <style> ... </style> tags in theme code will apply to every matching element which may not be what you want.
3

Hi @Johnnycrev

I have written custom code to get this done. To do this you will have to edit theme.liquid.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the below code just above </body>
<style>
@media screen and (min-width: 1280px) {
    .container-fluid {
        padding: 0 0px!important;
    }
}
</style>

image
image1902×611 72.6 KB

If you require further help to optimize your store, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated. And if this solves the problem, please Mark it as Solution!

Best Regards,
Makka