Have your say in Community Polls: What was/is your greatest motivation to start your own business?

Re: How to hide multiple columns

Solved

How to hide multiple columns

Auoehrper
Tourist
11 0 1

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

Accepted Solution (1)
dws_pvt_ltd
Shopify Partner
339 65 84

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. 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

View solution in original post

Replies 21 (21)
Auoehrper
Tourist
11 0 1

dws_pvt_ltd
Shopify Partner
339 65 84

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.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.

GTLOfficial
Shopify Partner
665 140 133

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh

dws_pvt_ltd
Shopify Partner
339 65 84

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.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
Auoehrper
Tourist
11 0 1

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
Shopify Partner
665 140 133

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

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
GTLOfficial
Shopify Partner
665 140 133

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
11.png

If this was helpful, hit the like button and accept the solution.
Thanks

- Buy me a Pizza
- If helpful then please Like and Accept Solution.
- Want to modify or custom changes or bug fix on the store Hire me. GTL web solutions
- Want Complete Storefront: Send an email ⇨- Email: info@gtlofficial.com - Skype: ritesh_27dh
dws_pvt_ltd
Shopify Partner
339 65 84

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

 

 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
Auoehrper
Tourist
11 0 1

Hello where should I add this code?

dws_pvt_ltd
Shopify Partner
339 65 84

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.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
Auoehrper
Tourist
11 0 1

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

Auoehrper_0-1725006740750.png

 

dws_pvt_ltd
Shopify Partner
339 65 84

Please share a screenshot of that code you put.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
Auoehrper
Tourist
11 0 1

Auoehrper_0-1725006869254.png

thankyou

dws_pvt_ltd
Shopify Partner
339 65 84

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.

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
Auoehrper
Tourist
11 0 1

I want to hide the mobile

dws_pvt_ltd
Shopify Partner
339 65 84

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. 

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
dws_pvt_ltd
Shopify Partner
339 65 84

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

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
Auoehrper
Tourist
11 0 1

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

dws_pvt_ltd
Shopify Partner
339 65 84

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

Screenshot from 2024-08-30 14-11-49.png

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.
Auoehrper
Tourist
11 0 1

thankyou,Already solved my problem.

dws_pvt_ltd
Shopify Partner
339 65 84

Your're welcome. Please mark as accepted solution.

 

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

Helpful? then please Like and Accept the Solution.
For any inquiries, please feel free to contact via WhatsApp and Email: sales@dolphinwebsolution.com.
For more information visit our website Dolphin Web Solution Pvt Ltd.