How to Change Footer Size on Website

Technical Q&A
, , ,

Topic summary

A Shopify store owner seeks to reduce their footer’s height and remove redundant copyright/terms text that duplicates existing links.

Initial Solution:

  • CSS code provided targets desktop screens (960px+) to reduce padding and hide the .footer__bottom section containing copyright text
  • Code added to theme’s CSS file (base.css/style.css/theme.css)

Follow-up Issue:

  • Footer sizing remains problematic on screens smaller than 960px
  • User requests additional CSS for mobile/tablet responsiveness

Final Solution:

  • Updated CSS removes the media query wrapper from .footer__bottom rule, applying the hidden copyright section across all screen sizes
  • Maintains reduced padding only on desktop (960px+)

Status: Issue resolved with responsive CSS adjustments. The discussion demonstrates a common Shopify theme customization workflow using CSS overrides in theme files.

Summarized with AI on November 1. AI used: claude-sonnet-4-5-20250929.
1

I would like to change the size of the footer on my website. The footer is too large, specifically I would like to reduce the height of the footer, if necessary reduce the text size but really just make it more compact. Is there a way I can do this by adding some CSS code?

Also, is there a way to get rid of this information that shows up in the footer:

Copyright © 2025, High Falls Canna . All rights reserved. See our terms of use and privacy notice.

Powered by Shopify

I have a separate link for ToS and Privacy Policy so it just seems redundant and takes up more space.

B9yFDJn
B9yFDJn2557×906 239 KB

Link to website: www.highfallscanna.com

1 Like
2

Hi @HFH

Try this one .

  1. From your Shopify admin dashboard, click on “Online Store” and then “Themes”.
  2. Find the theme that you want to edit and click on “Actions” and then “Edit code”.
  3. In the “Assets” folder, click on “base.css, style.css or theme.css” file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:
@media (min-width: 960px) {
    .footer.section {
        padding-top: 20px!important;
        padding-bottom: 0px !important;
}
    .footer__bottom {
        display: none;
}
}

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!

1 Like
3

Thank you so much! This certainly worked, looks much better now, but the sizing is still a bit off now when the screen width is smaller than 960.
Is there any CSS you can add to make the footer smaller when the screen is smaller than 960? I added some CSS myself to reduce the font size, ideally if the following text section can be removed it would make things much easier:

Copyright © 2025, High Falls Canna . All rights reserved. See our terms of use and privacy notice.

Powered by Shopify

Besides that, I’m sure there is a way to organize the items in the footer at that window size to make it smaller, I’m just not sure what the best way to go about it is. Really appreciate your help so far, if you can help me with this last bit I would be really grateful!!

4

Yes, sure. I didn’t add the tablet and mobile screens since you didn’t specify.

Please replace the code below to implement the changes correctly.

@media (min-width: 960px) {
    .footer.section {
        padding-top: 20px!important;
        padding-bottom: 0px !important;
}
}
    .footer__bottom {
        display: none !important;
}

And Save.

Result:

Made4uoRibe_0-1737929846022.png
Made4uoRibe_0-1737929846022.png690×333 5.13 KB

Please don’t forget to Like and Mark Solution to the post that helped you. Thanks!