Big Cartel Nova主题移动端页眉链接与正文字体大小调整问询

Hey there! Let’s sort out that mobile font sizing problem you’re having with your Nova theme. Desktop looks great, but mobile auto-enlarging those header links and product descriptions? Super easy to tweak with custom CSS—here’s exactly how to do it:

Step 1: Access Your Custom CSS Panel #

First, head to your Big Cartel dashboard:

• Go to Design > Customize
• Look for the Advanced tab (or sometimes labeled Custom CSS) — this is where you’ll paste the code below.

Step 2: Add CSS for Mobile Header Links #

Paste this code to adjust the font size of your mobile header navigation links. You can tweak the font-size value to match what looks best for your site:

@media (max-width: 767px) {
  /* Adjust mobile header navigation link font size */
  .header-nav a {
    font-size: 14px !important; /* Try 13px, 14px, or 15px to find your sweet spot */
  }
}

The @media (max-width: 767px) rule ensures this only applies to mobile devices (tablets and phones). The !important flag helps override the theme’s default styles so your changes stick.

Step 3: Add CSS for Mobile Product Descriptions #

Next, fix the product description (body text) font size on mobile. This code covers paragraphs, lists, and subheadings in your product descriptions—adjust the values as needed:

@media (max-width: 767px) {
  /* Adjust mobile product description paragraph font size */
  .product-description p {
    font-size: 15px !important;
  }
  /* Adjust lists in product descriptions */
  .product-description ul, .product-description ol {
    font-size: 15px !important;
  }
  /* Adjust subheadings in product descriptions (if you use them) */
  .product-description h2, .product-description h3 {
    font-size: 18px !important;
  }
}

If you don’t use subheadings or lists in your descriptions, you can leave those lines out—no harm done either way.

Step 4: Test and Tweak #

After pasting the code, hit Save and preview your site on a mobile device (or use your browser’s dev tools to simulate mobile view). Play around with the font-size numbers until everything looks balanced and easy to read, just like the reference site you mentioned.

内容的提问来源于stack exchange，提问作者Jane Pepper