Shopify themes, liquid, logos, and UX
hello everyone i need help please, i need the menu on the footer and the newsletter to be inline side by side with each other and i also want to decrease the menu font size on mobile
@maria323 - can you please share this page link?
Hello, @maria323
Hello,
1) Go to Online Store
2) Edit Code
3) Find theme.css/base.css file
4) Add the following code in the bottom
.footer {
display: flex;
flex-direction: column;
padding: 20px;
background-color: #002233; /* Footer background color */
color: #fff;
}
/* Newsletter Styling */
.footer-newsletter {
margin-bottom: 20px;
text-align: center;
}
.newsletter-input {
padding: 10px;
width: 70%;
border: none;
border-radius: 5px;
margin-right: 10px;
}
.newsletter-button {
padding: 10px;
border: none;
background-color: #007bff;
color: #fff;
border-radius: 5px;
cursor: pointer;
}
/* Navigation Links Styling */
.footer-navigation {
text-align: center;
margin-bottom: 20px;
font-size: 14px;
}
.footer-navigation a {
display: inline-block;
margin: 0 10px;
text-decoration: none;
color: #fff;
}
/* Social Media Icons Styling */
.footer-social {
text-align: center;
}
.footer-social img {
width: 24px;
height: 24px;
margin: 0 5px;
}
/* Responsive Styling for Mobile */
@media (max-width: 768px) {
.footer-newsletter {
margin-bottom: 15px;
}
.footer-navigation {
font-size: 12px;
margin-bottom: 15px;
}
.footer-social {
margin-top: 10px;
}
}
Thanks!
Hi @maria323
@media screen and (min-width: 769px){
.footer__content-top.page-width {
display: flex !important;
justify-content: center !important;
align-items: center !important;
}
}
@media screen and (max-width: 768px){
.footer-block.grid__item.footer-block--menu * {
font-size: 20px !important;
}
}
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