Problem Footer Size too long

Solved

Problem Footer Size too long

Kcyremia
Visitor
2 0 0

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
Screenshot 0006-05-22 at 11.13.15.png

Mobile version

Screenshot 0006-05-22 at 11.13.26.png

Desktop Version

Screenshot 0006-05-22 at 11.12.42.png

Mobile version

Screenshot 0006-05-22 at 11.12.24.png

Accepted Solution (1)

Dan-From-Ryviu
Shopify Partner
10869 2143 2278

This is an 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

 

Screenshot 2024-05-22 at 10.34.33.png

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

View solution in original post

Replies 2 (2)

Dan-From-Ryviu
Shopify Partner
10869 2143 2278

This is an 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

 

Screenshot 2024-05-22 at 10.34.33.png

- Solved it? Hit Like and Accept solution! ❤️Buy Me Coffee❤️
- Reton: Loyalty & Rewards - Earn points through tasks, redeem for discounts, and enjoy exclusive VIP rewards!
- Ryviu - Reviews & QA app: Collect product reviews, import reviews from AliExpress, Amazon, Etsy, Walmart, Shopee, Dhgate and CSV.
- Lookfy Gallery: Lookbook Image: Easy and fast to create Photo Gallery, Lookbook, Shop The Look.
- Reelfy‑Shoppable Videos+Reels: Create shoppable videos to engage customers and drive more sales.
- Enjoy 1 month of Shopify for $1. Sign up now.

Kcyremia
Visitor
2 0 0

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