coding my website

Store Design
, , ,

Topic summary

Goal: Align footer navigation with the newsletter, place social media icons beneath the newsletter, and reduce footer nav size on mobile for a Shopify theme (site link provided). Two images illustrate the desired layout and are important for context.

Proposed approach: Add custom CSS in theme.css/base.css. Key rules: make .footer-container a flex row with space-between and centered alignment; stack .newsletter vertically; add top margin to .social-media. Mobile (≤768px): stack footer elements vertically, center text, and reduce .footer-nav font size to 12px.

Update: Initial CSS led to a “code size limit” error when adding to the file. A revised snippet using !important on .newsletter, .footer-nav, and .social-media was provided to increase specificity and preserve the layout on mobile.

Current status: Changes are still “not working,” and no confirmed fix has been achieved. No final resolution; further troubleshooting is needed (e.g., addressing the size limit error or verifying selectors match the theme’s markup). Discussion remains open.

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

WhatsApp Image 2024-12-10 at 11.05.04_3b4958fc.jpg
WhatsApp Image 2024-12-10 at 11.05.04_3b4958fc.jpg607×1080 44.4 KB

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

https://sunfadednyc.com/

2

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!

3

the exceed code size limit

4

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;
    }
}
5

not working yet

6

hello