footer css

Store Design
, ,

Topic summary

Goal: make the footer menu and newsletter sit side by side, and reduce the menu font size on mobile in a Shopify theme. A reference image was provided, and visual results were later shared via screenshots.

Key contributions:

  • Request for the store/page link to inspect the layout.
  • CSS option 1 (add to theme.css/base.css): provides comprehensive footer styling with newsletter, navigation, and social sections, plus mobile responsiveness. It centralizes elements and adjusts navigation link font size on smaller screens. Applies general classes like .footer, .footer-newsletter, .footer-navigation, and .footer-social.
  • CSS option 2 (add via Theme Settings > Custom CSS): targets Shopify’s .footer__content-top.page-width to display as flex on desktop (>=769px) so blocks align side by side. On mobile (<=768px), sets the menu font size to 20px. Step-by-step placement instructions and result screenshots were provided.

Status: multiple solutions proposed with implementation paths and visuals. Original poster has not confirmed which solution worked; outcome remains unconfirmed.

Summarized with AI on December 12. AI used: gpt-5.
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