Shopify themes, liquid, logos, and UX
Hello,
I finished designing my homepage but I am having problems with the footer. It is not responsive as the mobile screen gets smaller.
It looks like this on desktop,
Then on smaller screens, it's like this,
Here's the link to the preview,
@media only screen and (max-width: 768px) {
.seven.columns, .nine.columns {
width: 100%;
text-align: center;
}
.footer_menu li {
display: inline-block;
padding: 7px;
margin: 0;
}
}
Add this css at the bottom of Online Store->Theme->Edit code->Assets->style.scss.liquid
@media only screen and (max-width: 768px) {
.seven.columns, .nine.columns {
width: 100%;
text-align: center;
}
.footer_menu li {
display: inline-block;
padding: 7px;
margin: 0;
}
ul.footer_menu {
margin: 0;
}
}
please update the code.
It worked! Thank you.
How about hiding a section for mobile view then another one will appear?
Here's the section id I want to hide,
shopify-section-template--15560919089303__1651929001beae71c0
Here's the one I want to appear when the one above is hidden,
shopify-section-template--15560919089303__165271530693be1672
Thank you, @oscprofessional
Please share the screenshot
User | RANK |
---|---|
205 | |
157 | |
78 | |
69 | |
66 |
Explore the 30-30-30 rule, a dynamic social media strategy for new businesses. Learn how t...
By Trevor Sep 20, 2023Discover how to leverage the often overlooked footer of your ecommerce site to gain custom...
By Skye Sep 15, 2023In this blog, we’ll be shining a light on Shopify Partners, Experts, and Affiliates. Who a...
By Imogen Sep 13, 2023