Shopify themes, liquid, logos, and UX
I want the footer navigation menu to align with the newsletter and the social media icon to be under the newsletter then the footer nav.menu to be more smaller in the mobile version
Hello, @maria323
1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom
.footer-container {
display: flex;
justify-content: space-between; /* Adjust spacing as needed */
align-items: center; /* Align items vertically */
}
.newsletter {
display: flex;
flex-direction: column; /* Stack elements vertically */
}
.social-media {
margin-top: 10px; /* Add some spacing from the newsletter */
}
@media (max-width: 768px) {
.footer-nav {
font-size: 12px; /* Make text smaller */
text-align: center; /* Center align for better readability */
}
.footer-container {
flex-direction: column; /* Stack all elements vertically */
align-items: center;
}
.social-media {
margin-top: 20px; /* Add spacing for separation */
}
}
Thanks!
the exceed code size limit
try this one
.footer-container {
display: flex;
justify-content: space-between;
align-items: center;
}
.newsletter {
display: flex !important;
flex-direction: column;
}
.social-media {
margin-top: 10px !important;
}
@media (max-width: 768px) {
.footer-container {
flex-direction: column;
align-items: center !important;
}
.footer-nav {
font-size: 12px !important;
text-align: center;
margin-top: 10px;
}
.social-media {
margin-top: 20px !important;
}
}
not working yet
hello
Learn how to build powerful custom workflows in Shopify Flow with expert guidance from ...
By Jacqui May 7, 2025Did You Know? May is named after Maia, the Roman goddess of growth and flourishing! ...
By JasonH May 2, 2025Discover opportunities to improve SEO with new guidance available from Shopify’s growth...
By Jacqui May 1, 2025