How to reduce the width of the Slide Show Header Image in the Impulse Theme in Shopify

In this video, I’m sharing a quick tip for those using the Impulse theme on Shopify to adjust the size of your header images. By adding a simple piece of CSS code, you can reduce the width of your header image by about 5%, or customize it to your preference. I’ll guide you through the steps to access the custom CSS section and implement this change, which will also apply to mobile views. Please be mindful of your mobile images and consider adding extra text if needed. I’ll paste the code below for you to use and you simply adjust the % to control the width. Please bear in mind that it will do the same for mobile also.

.slideshow-wrapper {
    max-width: 95%;
    margin: 0 auto;
}

To make sure this .slideshow-wrapper style only applies on desktop and not on mobile screens, you can wrap it in a CSS media query targeting larger screens. Here's the updated CSS:

@media screen and (min-width: 768px) {
.slideshow-wrapper {
max-width: 95%;
margin: 0 auto;
}
}

Simply increase / decrease the % amount and your image will reduce in size - it's as easy as that!

We do that. Get in touch with the team at We Are Chain — we make Shopify work for you.