Problem Footer Size too long

[Kcyremia]

Hello creators, developers, helpers, World conquerers... hehe

I have a problem with my website, I'm really bad at CSS and my banner and footer on mobile are awful !

Is there a way for me to make the banner bigger only on the mobile version and reduce the size of this footer.

Thank you very much

www.irasshai.store

Desktop Version
 

Mobile version

Desktop Version

Mobile version

[Dan-From-Ryviu · Accepted solution]

Hi @Kcyremia 

You can add this code to your theme.liqud file, before </body> in Online Store > Themes > Edit code to change your footer to collapsible on mobile device 

<style>
@media (max-width: 749px) {
  .grid .footer-block.grid__item {
    margin: 0;
  }
  .grid .footer-block__heading {
    position: relative;
    margin: 0;
    padding: 1.5rem 0;
    cursor: pointer;
  }
  .grid .footer-block__heading::after {
    content: "+";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    text-align: center;
  }
  .grid .footer-block__heading:not(.block-collapsed)::after {
    content: "-";
  }
  .grid .footer-block__heading.block-collapsed + .footer-block__details-content {
    visibility: hidden;
    opacity: 0;
    height: 0;
    margin: 0;
    padding: 0;
    transition: all .2s ease-out;
    overflow: hidden;
  }
  .grid .footer-block__heading + .footer-block__details-content {
    visibility: visible;
    opacity: 1;
    height: auto;
    transition: all .2s ease-out;
    overflow: hidden;
    margin-bottom: 3rem;
  }

}
</style>

<script>
window.addEventListener('DOMContentLoaded', () => {
  if (window.matchMedia('(min-width: 750px)').matches) {
    return
  }

  const handleCollapse = (heading) => {
    if (heading.classList.contains('block-collapsed')) {
      heading.classList.remove('block-collapsed')
      heading.setAttribute('aria-expanded', 'true')
    } else {
      heading.classList.add('block-collapsed')
      heading.setAttribute('aria-expanded', 'false')
    }
  }
  
  document.querySelectorAll('.grid .footer-block__heading').forEach((heading, index) => {
    heading.classList.add('block-collapsed_new')
    heading.setAttribute('role', 'button')
    heading.setAttribute('aria-expanded', 'false')
    heading.setAttribute('tabindex', '1')

    heading.nextElementSibling.setAttribute('id', `footer-block-index-${index}`)
    heading.setAttribute('aria-controls', `footer-block-index-${index}`)

    heading.addEventListener('click', () => { handleCollapse(heading) })
    heading.addEventListener('keypress',  () => { handleCollapse(heading) })
  })

})
</script>

After that, open footer.liquid file, find this part of code 

<h2 class="footer-block__heading 

Add this code after it block-collapsed so it will change to this 

<h2 class="footer-block__heading block-collapsed

[Kcyremia]

Hello ! 

I'm so sorry for the late reply, so many problems these past few weeks ! 
That works amazingly ! Thank you very much for your help and especially your time for it