Remove scrollbar on collapsible row on dawn theme

[glucinth]

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:

[AnneLuo · 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!

[AnneLuo · Accepted solution]

Remove the two lines

[AnneLuo · 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!

[glucinth]

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

[AnneLuo]

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.

[glucinth]

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 · Accepted solution]

Remove the two lines

[glucinth]

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

[AnneLuo · Accepted solution]

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

[glucinth]

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

[PageFly-Henry]

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

[PageFly-Henry]

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.

[glucinth]

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]

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]

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!