My footer is too large

Store Design
1

Hello, can someone help me position the email bar as shown in the image, and resize the footer and the font size in the my footer? My footer is too large, and I can’t adjust it using Shopify’s default settings.

trong2409_0-1732287577698.png
trong2409_0-1732287577698.png1115×477 13.4 KB

My URL: https://uponshelf.com/

2

@trong2409 please add this css to the very end of your base.css file and check,
Shopify Admin → Online Store ->Theme → Edit code → base.css

@media screen and (max-width: 989px) {
    .footer-block__details-content .list-menu__item--link {
        padding-top: 0.1rem !important;  padding-bottom: 0.1rem !important;}
}

.footer__content-top {padding-bottom: 1rem;}
.footer__content-bottom{padding-top: 1rem;}
3

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__content-top {
    padding-bottom: 0rem !important;
    display: inherit !important;
}

.footer:not(.color-scheme-1) {
    border-top: none !important;
    padding: 1rem 5rem 1rem 5rem !important;
    width: 100% !important !important;
    height: 90% !important !important;
}

Thanks!

4

hi, I followed your instructions, but everything still seems the same.

trong2409_0-1732288344883.png
trong2409_0-1732288344883.png1886×501 13.4 KB

5

@trong2409 - sorry remove that and add this

@media screen and (min-width: 750px) {
    .footer-block__details-content .list-menu__item--link {
        padding-top: 0.1rem !important;  padding-bottom: 0.1rem !important;}
}

.footer__content-top {padding-bottom: 1rem;}
.footer__content-bottom{padding-top: 1rem;}
6 
/* Footer Styles */
.footer {
    background-color: #333; 
    color: #fff; 
    padding: 20px 0; 
    font-family: Arial, sans-serif; 
}

.footer-container {
    display: flex; 
    justify-content: space-between; 
    flex-wrap: wrap; 
    gap: 20px; 
    padding: 0 20px; 
}

.footer-section {
    flex: 1;
    min-width: 250px; 
}

.footer-section h3 {
    font-size: 1.2rem;
    margin-bottom: 10px; 
}

.footer-section p {
    font-size: 0.9rem; 
    line-height: 1.5; 
}

.footer-section ul {
    list-style: none; 
    padding: 0;
}

.footer-section ul li {
    margin: 5px 0; 
}

.footer-section a {
    text-decoration: none; 
    color: #fff; 
    font-size: 0.9rem; 
    transition: color 0.3s ease; 

.footer-section a:hover {
    color: #ddd; 

.footer-bottom {
    text-align: center; 
    padding: 10px 0; 
    background-color: #222; 
    margin-top: 20px; 
}

@media (max-width: 768px) {
    .footer-container {
        flex-direction: column; 
        align-items: center; 
    }

    .footer-section {
        text-align: center; 
        min-width: 100%; 
    }

    .footer-bottom p {
        font-size: 0.8rem;
    }
}
7

Thank you, where should I copy this code? And I noticed you sent two messages— which one should I follow?

8

Hello, @trong2409 you can follow these steps for paste the code

Hello,

  1. Go to Online Store
  2. Edit Code
  3. Find theme.css/base.css file
  4. Add the following code in the bottom

Thanks!