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.
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
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.
As 2024 wraps up, the dropshipping landscape is already shifting towards 2025's trends....
By JasonH Nov 27, 2024Hey Community! It’s time to share some appreciation and celebrate what we have accomplis...
By JasonH Nov 14, 2024In today’s interview, we sat down with @BSS-Commerce to discuss practical strategies f...
By JasonH Nov 13, 2024