Making accordions full width on mobile view (Dawn Theme)

[bellevo]

Hey, I would like to know if its possible to make the accordions in my footer menu full width on mobile view. Any help would be appreciated!

My store: https://bellevodesign.com/

The issue:

[BSSCommerce-HDL]

Hi @bellevo ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[EcomGraduates]

Add custom CSS: At the bottom of this file, add the following CSS:

@media (max-width: 767px) {
  .footer-menu-accordion {
    width: 100% !important;
    margin: 0;
  }
}

[bellevo]

Hey, this moves all the text in the footer menu as well, is it possible to keep the text in the same position and only make the lines full width, thank you!

[bellevo]

Which file?

[BSS-TekLabs]

@media screen and (max-width: 749px) {
    .footer__content-top {
        padding-bottom: 3rem;
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

Can you try it @bellevo

[BSSCommerce-HDL]

Hi @bellevo ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you

[bellevo]

Hey, which file should I add it to? I tried base.css but it didn’t work. Thanks!

[bellevo]

Hey it still moved the text to the left side.

Is there a way to keep the text like this?

[BSSCommerce-HDL]

Hi @bellevo ,

Step 1: Go to Shopify Admin → Online Store ->Theme → Edit code

Step 2: Search file theme.liquid

Step 3: Insert this code above tag:

Here is result:

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you