Ella theme- How to change the font size and the location of the new page title

Store Design

Topic summary

Customizing an Ella theme page title and footer spacing remained only partially resolved.

  • For the new custom page, the goal was to make the title match the Privacy Policy page: smaller font size and centered alignment.
  • A suggested CSS fix was added to theme.scss.liquid: .section-header .title--large { font-size: 1.75em; text-align: center; }.
  • This worked for the page title, and the requester confirmed that part was solved.

The discussion then shifted to reducing footer height, especially the bottom area.

  • Several CSS snippets were proposed for theme.css / theme.scss, mainly adjusting .site-footer__middle and .site-footer__bottom padding, including use of !important.
  • The requester reported inconsistent results: spacing changed between the badge and footer, but not the actual footer-bottom height/layout they wanted.
  • It was also noted that the page structure/classes may behave differently across pages, which likely caused the inconsistent outcome.

Screenshots were central to showing before/after layout behavior. Final status: page-title issue resolved; footer-bottom spacing issue remained open and needed more exact inspection.

Summarized with AI on March 8. AI used: gpt-5.4.
8

@bethchan please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

@media screen and (min-width: 1024px){
   .template-index .site-footer__middle{
      padding: 42px 0 0px !important;
    }     

  .template-index .site-footer__bottom {
      padding:  0 !important;
  }
   }
1 Like