Shopify themes, liquid, logos, and UX
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
Solved! Go to the solution
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
- 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.
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
- 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.
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
Learn how to expand your operations internationally with Shopify Academy’s learning path...
By Shopify Feb 4, 2025Hey Community, happy February! Looking back to January, we kicked off the year with 8....
By JasonH Feb 3, 2025Expand into selling wholesale with Shopify Academy’s learning path, B2B on Shopify: Lau...
By Shopify Jan 28, 2025