Hide content container for specific section

Store Design
,

Topic summary

Goal: remove the gray border/box-shadow from a single multicolumn content container on the home page (Dawn 9.0.0) and make images appear larger.

Proposed solutions:

  • Sitewide CSS overrides: remove border and the pseudo-element shadow on multicolumn cards by targeting .multicolumn-card.content-container and .content-container:after.
  • Section-specific override: target the exact section ID (e.g., #shopify-section-…__multicolumn) to disable only that section’s box-shadow, avoiding global impact.
  • Spacing/size tweaks: adjust .multicolumn-card-spacing margins; increase container width in theme settings to enlarge images. A later tip suggested zeroing margins/padding for the multicolumn spacing in a color-background section.

Outcome: the author confirmed the CSS fixes worked and marked the issue as resolved. No further action required.

Notes:

  • The section-specific selector is preferable if changes should apply only to that one section.
  • Image size increase was addressed via theme settings rather than CSS in the thread.
Summarized with AI on January 29. AI used: gpt-5.
1

Hi,

I have set up a style for content containers in the theme settings, it looks great however on 1 speicific section I don’t like the way it looks.

Sebastian96_0-1680510642876.png
Sebastian96_0-1680510642876.png1647×610 130 KB

This section can be found on the home page.

Is there a way to remove the grey borders for only this section?

Also I would like to make the images a bit bigger.

I am using Dawn theme 9.0.0

My website: https://egretta-shop.com/

Password: Egretta12345

Thanks in advance,

Sebastian

2

@Sebastian96 Hello

add this css in base.css

.slider-mobile-gutter .content-container:after {
box-shadow: none;
}

.slider-mobile-gutter .multicolumn-card.content-container {
border: 0;
}

.multicolumn-card-spacing {
margin-left: 0.5rem !important;
margin-right: 0.5rem !important;
}

If you want more width of image you can increase container width from them settings

1 Like
3

HI @Sebastian96 ,

Add this CSS code
Online Store > Themes > Edit code > Assets > custom.css or theme.css

.multicolumn-card.content-container { border: none; }
.multicolumn-card.content-container:after { box-shadow: none; }
1 Like
4

You can do that by adding this CSS code at the bottom of base.css and save file

#shopify-section-template--17874775179528__multicolumn .content-container:after { box-shadow: none !important; }

Here is there result

Screenshot 2023-04-03 at 16.01.48.png
Screenshot 2023-04-03 at 16.01.48.png1379×640 374 KB

1 Like
5

Hi @Sebastian96

This is Victor from PageFly - Shopify Page Builder App, I’d like to suggest this idea:

Online Store ->Theme ->Edit code

Assets ->Base.css

.multicolumn-card.content-container { 
   border: none !important; 
}
.multicolumn-card.content-container:after { 
   box-shadow: none !important; 
}

Hope you find my answer helpful!

Best regards,

Victor | PageFly

1 Like
6

Thank you Everyone.

It works perfectly.

Best regards,

Sebastian

7

Hi @Sebastian96

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the css file:

.multicolumn color-background-1 .multicolumn-card .multicolumn-card-spacing {margin: 0 !important; padding: 0 !important;}

Regards,

San

1 Like