Dawn theme - Changing size of collapsible content 'Button' on mobile view

[harry_12345]

Hi there,

The arrow buttons used to expand the collapsible content on my site look fine on desktop, but very fat and wide on mobile:

Can anyone suggest a way that these buttons can be edited, and made smaller?

site: fruitysleep.com

Thanks,

[harry_12345]

Update, I’ve found a temporary fix by trial and error inside the code editor.

If anybody has a better solution, please suggest

base.css file

/* Adjust collapsible arrow size on mobile */
@media (max-width: 767px) {
svg.icon.icon-caret {
width: 16px;
margin-right: 0px;
background: #dad0ff24;
border-radius: 50%;
position: relative;
height: 36px;
}

[INA_MSWEB]

Hi @harry_12345

I hope you are doing good and welcome to the Shopify Community!
I am San from MS Web Designer.

Please add this css in your bottom of the base.css file:

@media (max-width: 767px) {

.collapsible-content .accordion svg.icon.icon-caret {width: 30px !important;height: 30px !important;padding: 8px !important;}

}

Regards,

San

[oscprofessional]

Hello @harry_12345

You can try this code: it will be helpful to you

Go to the Online Store->Theme->Edit code->Assets->base.css>Add this code at the bottom.

svg.icon.icon-caret {
    width: 36px !important;
}

[harry_12345]

Hi San,

It worked initially, but for some reason now the arrows don’t show. Do you know why this might be ?