footer css

[maria323]

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

[suyash1]

@maria323  - can you please share this page link?

[topnewyork]

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!

[DaisyVo]

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