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

Store Design
,
1

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

2

@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!

3

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

4

@Rjbm

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

Thanks!

5

@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.