How can I change the container size of the before-after slider on prestige theme?

[Rjbm]

Hi there, 

I have a before-after slider on my home page and it is massive. I would like to reduce the size of the whole container on desktop as it takes up most of the screen and is too big. Link here: https://www.whereswinnie.co.uk/

Anyone know how to reduce the overall size of the slider on desktop? 

Thank you

[vm-web]

@Rjbm 

Please add the following CSS code to your assets/theme.css bottom at the file.

#shopify-section-template--24415888703871__slideshow {
width: 95% !important;
margin: 0 auto !important;
}

Thanks!

[Rjbm]

I'm afraid this doesn't work. It is for the before-after slider, not the slideshow. 

[vm-web]

@Rjbm 

can you share share a screenshot of what you want then i can sent correct solution for you!

Thanks!

[vm-web]

@Rjbm 

To make changes to the Prestige theme, you'll need to modify the theme's code. Here are some general guidelines to address your specific concerns:

1. Reducing the header size:

   • Open the theme editor in your Shopify admin.
   • Navigate to "Online Store" > "Themes" and click on the "Customize" button for the Prestige theme.
   • In the theme editor, look for the "Header" section or "Logo" settings.
   • Adjust the padding or margin values to reduce the space around your logo. You may need to target specific CSS classes or elements to achieve the desired result.
   • Save your changes and preview them on your storefront. If necessary, repeat the process to fine-tune the header size.

2. Allowing scrolling when the search bar is open:

   • Locate the code for the search bar in the theme's code files.
   • Look for the JavaScript or CSS code responsible for disabling scrolling.
   • Remove or modify that code to allow scrolling even when the search bar is open.
   • Save the changes to the theme files and test the scrolling behavior on your storefront.

3. Keeping the theme centered on larger screens:

   • Open the theme editor for the Prestige theme.
   • Look for the "Layout" or "Container" section.
   • Adjust the container width or max-width settings to limit the width of the theme content on larger screens.
   • Ensure that the container is set to be centered on the page by adjusting the margins or using CSS properties like "margin: 0 auto;".
   • Save the changes and preview the theme on different screen sizes to ensure the content remains centered.