Adjusting Footer Height in Mobile Theme

In general, you want to learn to use media queries in your CSS. A media query allows you to set CSS for different screen sizes. A basic example can be seen below.

@media only screen and (max-width: 500px) {
    body {
        background-color: lightblue;
    }
}

This basic example sets the background color to light blue if the screen width is smaller than 500px. Typically a theme will have multiple breakpoints set for different screen sizes. In your style.css, your media queries (@media) start at line 2323 and you can see how they have broken them down. So, for example, you might enter something like this in the @media group starting at line 2578

@media only screen and (max-width: 580px) {

footer#colophon {
max-height: 75px;
}

}

Please remember that this is just an example and I highly suggest you do some studying on @media queries and grasp the basic concepts before you start experimenting.

Hello @britdaw

You can achieve this by applying following CSS code.

@media (max-width:320px) {

footer#colophon {
    margin-bottom: -80px;
}

.site-footer .site-container > ul {
    margin: 0;
    padding: 20px 0 20px !important;
}
   
    }

Hope this will help.

Thanks.

Thank you so much! I appreciate your help!