Reducing size of slideshow content container for Dawn Theme

Shopify Discussion

Topic summary

Goal: Reduce the slideshow content container’s width/margins (desktop, Dawn theme) because it’s too wide and blocks product tiles when centered.

Progress and attempts:

  • Store URL shared; site initially password-protected, then access granted.
  • Proposed fix: add CSS to reduce padding via Edit code > Assets > base.css (or style.css/theme.css):
    .banner__box { padding: 1rem !important; }
  • Result: No visible change; container remains same overall size. User shared screenshots to show issue persists.

Clarifications:

  • Helper noted the code only reduces internal padding, not the container’s overall width.
  • User confirmed the need is to shrink left/right size (width or horizontal margins), not just padding.

Status:

  • Unresolved. Next step likely requires adjusting container width or horizontal margins (not just padding) for the slideshow content area.

Notes:

  • Screenshots are central to understanding the visual issue.
  • No final code or setting change provided yet; discussion remains open.
Summarized with AI on January 14. AI used: gpt-5.
1

Hey gang. Trying to reduce the size or margins (desktop view) of slideshow content container for Dawn Theme. Its currently too big and blocks products being displayed when centered. Any ideas would be much appreciated. see pic below.

Thanks in advance;-)

IMG_0340 (1).jpg
IMG_0340 (1).jpg320Ă—170 15.9 KB

2 Likes
2

Hi @Alexa_RN

Would you mind to share your Store URL website? with password if its unpublish. Thanks!

3

no clue

4
5

Thanks, but its password protected.

6

try now

1 Like
7

Thanks, Do you mean like this?

Made4uoRibe_0-1699132823409.png
Made4uoRibe_0-1699132823409.png653Ă—357 230 KB

If it is try this one.

  • From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  • Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  • In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
.banner__box {
    padding: 1rem !important;
}
  • And Save.

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

8

yes

9

still same size after adding code to base.css . i also refreshed the page, no luck

IMG_0343.jpg
IMG_0343.jpg320Ă—310 19.5 KB

IMG_0342.jpg
IMG_0342.jpg320Ă—195 19.4 KB

10

I only take the padding not change the size. Do you like to have smaller width?

11

correct it needs to be reduced on left and right