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 </head> tag: 

<style>
 @media only screen and (max-width: 749px) {
    .footer__content-top {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
}
</style>

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 😍

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

[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 </head> tag: 

<style>
@media screen and (max-width: 749px) {
    .footer__content-top {
        padding-bottom: 3rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    .footer-block.grid__item:first-child {
       padding-left: 4rem !important;
       padding-right: 4rem !important;
    }
}
</style>

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 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 </head> tag: 

<style>
  @media screen and (max-width: 749px) {
    .footer__content-top {
        padding-bottom: 3rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
    
    .footer-block.grid__item:first-child {
       padding-left: 4rem !important;
       padding-right: 4rem !important;
    }
    
    h2.footer-block__heading {
      padding-left: 4rem !important; 
    }
     
    h2.footer-block__heading:after {
      right: 4rem !important;
    }
}
</style>

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]

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 

[bellevo]

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