footer css

Store Design
, ,
1

WhatsApp Image 2024-12-10 at 11.11.06_810d3868.jpg
WhatsApp Image 2024-12-10 at 11.11.06_810d3868.jpg1080×247 21 KB

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

2

@maria323 - can you please share this page link?

3

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!

4

Hi @maria323

To complete your requests, please follow these steps:

  1. Go to Shopify Admin > Online Store > Theme > Customize > Theme Settings > Custom CSS https://prnt.sc/i8ljAMlHJUKl
  2. Paste the code provided into the Custom CSS section.
@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;
}
}

Here is the result: https://prnt.sc/DAENk7MB-0nB ; https://prnt.sc/QC28CLE7NgRH

I hope this helps

Best,

Daisy