How can I modify the width of collapsible content on a specific page?

Store Design
,
1

Hello, I have 2 collapsible content on my website. One in the main page which is perfect on desktop and mobile and one on the “stockist” page.

I would like to modify the stockist one. I would like it to be a bit less wide ( the same as in the front page basically) as i showed in the screenshot ( and of course on the right size too).

This modification must not modify the size of the one in the main page as it is already perfect :slightly_smiling_face:

Shop link : https://0e0f82.myshopify.com/

Capture.JPG
Capture.JPG1901×906 61.2 KB

Thanks by advance if it is possible !

2

Hey @GadVenin

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.

Capture.JPG
Capture.JPG1901×907 37.3 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

3

Hello Moeed, it changed on both pages and it is completely too small unfortunately…

4

Hey @GadVenin
Remove the previous code and add this updated code. This code will only effect on Stockists page.

Follow these Steps:

  1. Go to Online Store
  2. Edit Code
  3. Find theme.liquid file
  4. Add the following code in the bottom of the file above tag.
{% if page.handle == 'stockists' %}

{% endif %}

Capture.JPG
Capture.JPG1897×872 40.3 KB

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
5

@GadVenin add below css into base.css file

.grid--1-col .grid__item {
    max-width: 95% !important;
}

Ujjaval_0-1685954257985.png
Ujjaval_0-1685954257985.png1589×784 20.3 KB

6

Yes ! It is much better is it possible to make it a bit wider so it is the same as on the main page ?

7

You can change the max-width from the coding according to how you want and set it accordingly!

If I managed to help you then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like