Collapsible content modification

[GadVenin]

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 🙂

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

Thanks by advance if it is possible !

[Moeed]

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 </body> tag.

<style>
@media screen and (min-width: 1024px) {
.grid.grid--1-col.grid--2-col-tablet.collapsible-content__grid.collapsible-content__grid--reverse {
    max-width: 40%;
    margin-left: 450px;
}
}
</style>

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

Best Regards,
Moeed

[GadVenin]

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

[Moeed · Accepted solution]

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 </body> tag.

{% if page.handle == 'stockists' %}
<style>
@media screen and (min-width: 1024px) {
.grid.grid--1-col.grid--2-col-tablet.collapsible-content__grid.collapsible-content__grid--reverse {
    max-width: 70%;
    margin-left: 220px;
}
}
</style>
{% endif %}

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

Best Regards,
Moeed

[GadVenin]

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

[Moeed]

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

[Ujjaval]

@GadVenin add below css into base.css file 

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