All things Shopify and commerce
Hi, How to hide multiple columns in Shopify's Dawn template to make it invisible to cell phones.
Solved! Go to the solution
This is an accepted solution.
For Mobile
{% if page.handle == "ziweidoushu" %}
<style>
@media screen and (max-width: 749px) {
.multicolumn-list, .multicolumn .title-wrapper-with-link {
display: none;
}
}
</style>
{% endif %}
add it in your section file of the multicolumn.liquid.
hello @Auoehrper
Can you please send me the Website URL.
Thanks
hello @Auoehrper
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> base.css
add this code at the end of the file.
@media screen and (max-width: 750px) {
section#shopify-section-template--23337432613183__multicolumn_rgyi73 {
display: none !important;
}
.rich-text__blocks.center {
display: none;
}
}
Buy me a Pizza
If this was helpful, hit the like button and accept the solution.
Thanks
Please share your store URL and password.So that I will check and let you know the exact solution here.
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
Hello @Auoehrper
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> section-multicolumn.css
add this code at the end of the file.
@media screen and (max-width: 749px) {
.multicolumn-list:not(.slider) {
display: none !important;
}
}
If this was helpful, hit the like button and accept the solution.
Thanks
Can you tell me which part are you talking about? Take a screenshot of the part which you want to hide in your mobile.
hello @Auoehrper
are you talking about this part
Hello! @Auoehrper Please follow these steps to add this CSS code:
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your Section file.
5. open "multicolumn.liquid"
6. Add the following code at the end of the file.
{% if request.page_type == "index" %}
<style>
@media screen and (max-width: 749px) {
.multicolumn-list {
display: none;
}
}
</style>
{% endif %}
This will hide the multi-column in the home page only.
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
https://www.globalpsychlab.com/pages/ziweidoushu
Hi I want to hide the multiple columns at the bottom of this page, what should I do?
You want to hide this for both desktop and mobile....???
Go to online store ----> themes ----> actions ----> edit code ---->assets ----> section-multicolumn.css
add this code at the end of the file.
.multicolumn .title-wrapper-with-link {
margin-top: 0;
display: none !important;
}
.multicolumn-list.slider {
padding: 0;
display: none !important;
}
.multicolumn .button {
margin-top: 4rem;
display: none !important;
}
result
If this was helpful, hit the like button and accept the solution.
Thanks
Try this code below for this page,
For mobile and desktop both,
{% if page.handle contains "ziweidoushu" %}
<style>
.multicolumn-list, .multicolumn .title-wrapper-with-link {
display: none;
}
</style>
{% endif %}
For Mobile
{% if page.handle contains "ziweidoushu" %}
<style>
@media screen and (max-width: 749px) {
.multicolumn-list, .multicolumn .title-wrapper-with-link {
display: none;
}
}
</style>
{% endif %}
Hello where should I add this code?
1. Go to your Online Store
2. Click on "Themes"
3. Select "Edit code"
4. Open your Section file.
5. open "multicolumn.liquid"
6. Add the following code at the end of the file.
https://www.globalpsychlab.com/pages/ziweidoushu
I did that but the multiple columns are still there in the mobile and computer versions
Please share a screenshot of that code you put.
thankyou
You want to hide it in desktop and mobile both?
If you want to hide it to both screens then write only that below code without media query and
If you want to hide it to only the mobile screen then write only that above code with media query.
See the results and reply what happens.
I want to hide the mobile
This is an accepted solution.
For Mobile
{% if page.handle == "ziweidoushu" %}
<style>
@media screen and (max-width: 749px) {
.multicolumn-list, .multicolumn .title-wrapper-with-link {
display: none;
}
}
</style>
{% endif %}
add it in your section file of the multicolumn.liquid.
Please add this code in your section file of multicolumn don't add it into the CSS file please.
Hi, Can you tell me where I should find this file?
See the second last file of the section/multicolumn.liquid
thankyou,Already solved my problem.
Your're welcome. Please mark as accepted solution.
Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.
The year-end shopping spree is around the corner! Is your online store ready for the ...
By JasonH Nov 10, 2024We recently spoke with Zopi developers @Zopi about how dropshipping businesses can enha...
By JasonH Oct 23, 2024A big shout out to all of the merchants who participated in our AMA with 2H Media: Holi...
By Jacqui Oct 21, 2024