Solved

Remove scrollbar on collapsible row on dawn theme

glucinth
Explorer
61 1 11

Good day! I have tried searching for a solution to remove the scroll bar from a collapsible row, but I couldn't find any. Can someone please share their knowledge on how to remove it? I am using a metafield for different product's size chart. Please see attach photo for visual reference. Thank you.

 

CURRENT LOOK OF COLLAPSIBLE ROW:

glucinth_0-1716510183342.png

 

Accepted Solutions (3)

AnneLuo
Shopify Partner
597 120 121

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

 

<style>
  @media screen and (min-width: 1024px) {
    .accordion__content.rte {
       overflow-y: hidden;
    }
  }
</style>

 


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

AnneLuo
Shopify Partner
597 120 121

This is an accepted solution.

Remove the two lines

AnneLuo_0-1716516584336.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

AnneLuo
Shopify Partner
597 120 121

This is an accepted solution.

Delete these two lines directly from the code I provided last time.

AnneLuo_0-1716516912089.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

View solution in original post

Replies 13 (13)

AnneLuo
Shopify Partner
597 120 121

This is an accepted solution.

You can try this code by following these steps:
Step 1: Go to the online store ->Theme ->Edit Code.
Step 2: Find the theme.liquid file and add the following code above the </head> tag

 

<style>
  @media screen and (min-width: 1024px) {
    .accordion__content.rte {
       overflow-y: hidden;
    }
  }
</style>

 


Hopefully it will help you. If yes then Please don't forget hit Like and Mark it as solution!

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

glucinth
Explorer
61 1 11

Hello, @AnneLuo that was very helpful! It worked. Thank you so much!!

AnneLuo
Shopify Partner
597 120 121

Thank you for your reply. I'm glad to hear that the solution worked well for you.
If you require any more help, please don't hesitate to reach out.

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

glucinth
Explorer
61 1 11

Hello again @AnneLuo, while the code worked for desktop mode the mobile still has the scroll bar. Do you know how to remove it as well for mobile view?? 

AnneLuo
Shopify Partner
597 120 121

This is an accepted solution.

Remove the two lines

AnneLuo_0-1716516584336.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

glucinth
Explorer
61 1 11

I'm sorry. Where should I paste it? Should I copy another code without the 2 lines or just edit the first code?

AnneLuo
Shopify Partner
597 120 121

This is an accepted solution.

Delete these two lines directly from the code I provided last time.

AnneLuo_0-1716516912089.png

 

If this is helpful, please Like and Accept the solution.
Want to modify or custom changes on store? Let me help.
- Feel free to Email Me   

Buy Me A Coffee

glucinth
Explorer
61 1 11

Got it.  It is working! Thank you so much!

PageFly-Henry
Shopify Partner
1136 322 276

Hi @glucinth 

This is Henry from PageFly - Landing Page Builder App

 

You can try this code by following these steps: 

Step 1: Go to Online Store->Theme->Edit code.

Step 2: Search file base.css

Step 3: Paste the below code at bottom of the file -> Save

 

.accordion__content.rte {overflow: hidden;}

 

Hope that my solution works for you.

Best regards,

Henry | PageFly

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

PageFly-Henry
Shopify Partner
1136 322 276

Also, I noticed a few issues in your store that you could improve.
- The logo should be centered so that the header can be more balanced.
- You should theme a banner as the first section on the home page because it will identify your brand.

PageFlyHenry_0-1716514042102.png

 

Please let me know if it works by giving it a Like or marking it as a solution!


PageFly - #1 Page Builder for Shopify merchants.


All features are available from Free plan. Live Chat Support is available 24/7.

glucinth
Explorer
61 1 11

Hello @PageFly-Henry thank you for noticing this. Let me check this one. Regarding your second point, I get it now.. I am still working on which banner to use and the marketing team is still working on the collaterals. Rest assured that we will have it once ready. Thank you for the suggestions.

glucinth
Explorer
61 1 11

Hello again, do you know a solution how to balance the header without putting the logo at the center? I really find it not fitting at the center and just want to keep it at left side for simplicity.

glucinth
Explorer
61 1 11

Hello @PageFly-Henry, thanks for the reply however I tried this code already before posting and its not working. But I already found the solution shared by @AnneLuo and it worked. Still, thank you for trying to help me. Appreciate it a lot!