How to hide multiple columns

[Auoehrper]

Hi, How to hide multiple columns in Shopify's Dawn template to make it invisible to cell phones.

[Auoehrper]

https://www.globalpsychlab.com/

[dws_pvt_ltd]

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.

[GTLOfficial]

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

[dws_pvt_ltd]

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.

[Auoehrper]

https://www.globalpsychlab.com/pages/ziweidoushu

Hi I want to hide the multiple columns at the bottom of this page, what should I do?

[GTLOfficial]

You want to hide this for both desktop and mobile....???

[GTLOfficial]

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

[dws_pvt_ltd]

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 %}

[Auoehrper]

Hello where should I add this code?

[dws_pvt_ltd]

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.

[Auoehrper]

https://www.globalpsychlab.com/pages/ziweidoushu
I did that but the multiple columns are still there in the mobile and computer versions

[dws_pvt_ltd]

Please share a screenshot of that code you put.

[Auoehrper]

thankyou

[dws_pvt_ltd]

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.

[Auoehrper]

I want to hide the mobile

[dws_pvt_ltd · 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. 

[dws_pvt_ltd]

Please add this code in your section file of multicolumn don't add it into the CSS file please.

[Auoehrper]

Hi, Can you tell me where I should find this file?

[dws_pvt_ltd]

See the second last file of the section/multicolumn.liquid 

[Auoehrper]

thankyou,Already solved my problem.

[dws_pvt_ltd]

Your're welcome. Please mark as accepted solution.

Feel free to reach out if you have any questions or need assistance.
Best Regards,
DWS.