Change the image size ratio on slide show banner

Shopify Discussion

Topic summary

Goal: reduce slideshow banner image size (~75–80%) and center the images instead of full-width.

Initial attempt: CSS on .banner__media (max-width/max-height 70%, display:block, margin:auto) successfully reduces size but does not center.

Suggested fix: edit the theme’s base.css and set .banner__media { max-width:80%; display:block; margin:0 auto; } to center.

Feedback: Users report this change does not center the slideshow images after resizing; it only affects image size within the slideshow, not the banner alignment.

Key context: CSS (styling rules) and base.css (Shopify theme stylesheet) are central to the issue.

Status: No resolution yet; the centering problem remains. No confirmed workaround or action items were agreed upon.

Summarized with AI on December 19. AI used: gpt-5.
1

Hello - i am trying to set my images on the ‘image slide show’ banner so that they are centered and are not blown full-width across the page. I want to decrease the image sizes to about 75% to 80% so the aspect ratio is smaller and centered.

I can reduce the image size/ratio using this code i wrote:

.banner__media {
max-width: 70%;
max-height: 70%;
display: block;
margin-left: auto;
margin-right: auto;
}

But for some reason it wont center the image.

Please help!

1 Like
2

Hello There,

  1. In your Shopify Admin go to online store > themes > actions > edit code
  2. Find Asset > base.css and paste this at the bottom of the file:
.banner__media {
max-width: 80%; /* Adjust the value as needed */
display: block;
margin: 0 auto; /* This centers the image horizontally */
}
3

This does not work to centre the slideshow images after resizing.

4

It only changes the size of the image within the slide show, not the actually slide banner