What's your biggest current challenge? Have your say in Community Polls along the right column.

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

Solved

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

GadVenin
Excursionist
28 2 8

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/ Capture.JPG

 

Thanks by advance if it is possible !

Accepted Solution (1)
Moeed
Shopify Partner
6340 1720 2077

This is an 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 %}

Capture.JPG

 

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

 

Best Regards,
Moeed

 

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


View solution in original post

Replies 6 (6)

Moeed
Shopify Partner
6340 1720 2077

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>

Capture.JPG

 

 

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

 

Best Regards,
Moeed

 

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


GadVenin
Excursionist
28 2 8

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

Moeed
Shopify Partner
6340 1720 2077

This is an 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 %}

Capture.JPG

 

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

 

Best Regards,
Moeed

 

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


GadVenin
Excursionist
28 2 8

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
Shopify Partner
6340 1720 2077

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

- Need a Shopify Specialist? Chat on WhatsApp

- Get a quick Shopify quote – Click here!

- Boost Your Sales with Affiliate Marketing - UpPromote: Affiliate & Referral


Ujjaval
Shopify Partner
1242 197 213

@GadVenin add below css into base.css file 

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

Ujjaval_0-1685954257985.png