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,
@kj0 ,
@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
@kj0 ,
@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
@kj0 ,
Please share the screenshot
User | RANK |
---|---|
134 | |
91 | |
76 | |
64 | |
52 |
Learn these 5 things I had to learn the hard way with starting and running my own business
By Kitana Jan 27, 2023Would you love to unleash the unbridled power of the Google Shopping Channel into your sho...
By Gabe Jan 6, 2023How can you turn a hobby into a career? That’s what Emmanuel did while working as a wa...
By Skye Dec 30, 2022