Shopify themes, liquid, logos, and UX
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 !
Solved! Go to the solution
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 %}
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
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
Hello Moeed, it changed on both pages and it is completely too small unfortunately...
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 %}
If I managed to help you then, don't forget to Like it and Mark it as Solution!
Best Regards,
Moeed
Yes ! It is much better is it possible to make it a bit wider so it is the same as on the main page ?
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
Hey Community! As the holiday season unfolds, we want to extend heartfelt thanks to a...
By JasonH Dec 6, 2024Dropshipping, a high-growth, $226 billion-dollar industry, remains a highly dynamic bus...
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024