How do i make the header smaller and closer to the media?

Store Design
, ,

Topic summary

A user seeks to reduce the product title size and decrease spacing between the title and product media on their Shopify store.

Two CSS solutions were provided:

Solution 1 (LizHoang):

  • Edit base.css file
  • Add CSS targeting h2.title.inline-richtext (font-size: 20px) and .title-wrapper-with-link (margin-bottom: 6px)
  • Includes before/after screenshot showing reduced title size and spacing

Solution 2 (DaisyVo):

  • Edit theme.liquid file
  • Insert CSS within {% style %} tags above the </head> tag
  • Targets .title-wrapper-with-link > h2.title (font-size: 24px) and .title-wrapper-with-link (margin-bottom: 5px)
  • Provides step-by-step screenshots and visual result

Both approaches use !important flags to override existing styles. The main difference is file location (base.css vs. theme.liquid) and slightly different font sizes (20px vs. 24px). No response yet from the original poster on which solution was implemented.

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

Hey, I want to make the title smaller and closer to the videos. https://charmente.com/products/charmente-flared-work-yoga-pants

IMG_0455.jpg
IMG_0455.jpg1200×1427 132 KB

2

Hi @Simon159

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

h2.title.inline-richtext.h2.title-with-highlight {
    font-size: 20px !important;
}

.title-wrapper-with-link.title-wrapper--self-padded-mobile.title-wrapper--no-top-margin.animate-item.animate-item--child.index-0 {
    margin-bottom: 6px !important;
}

Result

LizHoang_0-1740306022300.png
LizHoang_0-1740306022300.png343×348 92.1 KB

Best,

Liz

3

Hi @Simon159

I hope you are well. You can follow our instructions below:
1/ Shopify admin > Online store > Edit code: https://prnt.sc/M4p-gua99Uf4
2/ Search for “theme.liquid” file: https://prnt.sc/b6xveIKe-Rh2
3/ Open the file and search for tag and add the following code above tag: https://prnt.sc/KWtKYyZkDtYJ

Here is the code for Step 3:

{% style %}
.title-wrapper-with-link > h2.title.inline-richtext {
    font-size: 24px !important;
}
.title-wrapper-with-link {
    margin-bottom: 5px !important;
}
{% endstyle %}

DaisyVo_0-1740313720700.png
DaisyVo_0-1740313720700.png353×559 133 KB

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.