Refresh Theme - reduce size of image

Store Design
, , ,

Topic summary

A Shopify store owner using the Refresh theme seeks to reduce the size of banner images on their homepage (brasebreizh.fr).

Multiple CSS solutions proposed:

  • Initial suggestions involved adding CSS to the base.css file targeting .media elements with width/height adjustments and positioning properties
  • One approach used object-fit: contain with horizontal padding (14% left/right) to shrink images while maintaining aspect ratio
  • Alternative solutions focused on .banner .media selectors with absolute positioning

Current status:

  • The store owner reports that solutions are working but causing alignment issues—images appear distorted or not properly centered
  • Discussion remains ongoing as the centering problem has not been resolved

Technical note: All solutions require editing the theme’s base.css file through the Shopify admin (Online Store > Themes > Actions > Edit Code). The padding percentage (14%) can be adjusted to control image size.

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

  • Here is the solution for you

  • Please follow these steps:

step.png
step.png1865×854 125 KB

  • Then find the base.css file.

  • Then add the following code:

.banner__media img {
    object-fit: contain;
    padding-left: 14%;
    padding-right: 14%;
}

  • Then press ‘Save’ to save the code.

  • Here is the result you will achieve:

BssTekLabs_0-1718376881272.png
BssTekLabs_0-1718376881272.png1891×888 220 KB

  • You can also increase it by 14% for a larger gap, or decrease it by 14% for a smaller one."

  • Good luck. If you find it helpful, please press like and mark it as the solution.