Change size of 'Text' to the same size as 'Menu' for my footer (desktop only)

Store Design
, , ,

Topic summary

A user seeks to reduce the font size of ‘Text’ blocks in their footer to match the ‘Menu’ size on desktop only (mobile is fine). The site uses the Dawn theme.

Three solutions were proposed:

  1. Abdosamer: Add CSS to section-footer.css targeting .footer-block__details-content with font-size: 1.5rem inside a media query for screens 750px+

  2. LizHoang: Insert CSS into base.css targeting multiple footer elements (menu items, headings, blocks) with specific font sizes (20px, 30px) for screens 990px+. Includes a screenshot showing the result.

  3. Dan-From-Ryviu: Add CSS via Theme Customizer’s Custom CSS section, targeting .footer-block__details-content p with font-size: 1.4rem

All solutions use media queries to apply changes desktop-only and include !important flags to override existing styles. The discussion remains open with no confirmation of which solution was implemented.

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

hello, i would like to change the size of my ‘Text’ for my footer so that it is the same size as the ‘Menu’ as it is currently bigger. I only need to change the size on desktop, it is fine on mobile:

Screenshot 2025-02-16 at 10.36.59.png
Screenshot 2025-02-16 at 10.36.59.png2088×530 64.3 KB

here is my website, as you can see the ‘Text’ font size is bigger than the ‘Menus’

website url is www.antico-abito.com , theme is dawn

1 Like
2

Hi @ads18922 ,
Go to section-footer.css file and add the following code :

@media(min-width:750px){
.footer-block__details-content {
   
    font-size: 1.5rem !important;
}

}
3

Hi @ads18922

  • You can try to follow this step
    Step 1: Go to Edit code
    Step 2: Find file base.css and add this code at the end of the file
@media (min-width: 990px) {
a.link.link--text.list-menu__item.list-menu__item--link {
    font-size: 20px !important;
}

.footer-block__heading {
        font-size: 30px !important;
    }

.footer-block.grid__item.scroll-trigger.animate--slide-in {
    font-size: 20px !important;
}

}

Result:

LizHoang_0-1739715749957.png
LizHoang_0-1739715749957.png1891×707 59.1 KB

Best,

Liz

4

Hi @ads18922

Please add this code to Custom CSS in Online Store > Themes > Customize > Theme settings.

.footer-block__details-content p { font-size: 1.4rem !important; }