Buy me a coffee

How do i reduce the size between title and subtext?

By default, the heading (title) always has a default margin, so you will see a space between the title (heading) and subtext (paragraph), like the screenshot.

How Do I Reduce The Size Between Title And Subtext 01 Min

To reduce this space, you can use below CSS code

#1. All text

Use this code to Custom CSS box

h1, h2, h3 {
margin-bottom: 0px;
}
h1+p, h2+p, h3+p {
margin-top: 0px;
}

How Do I Reduce The Size Between Title And Subtext 02 Min

How Do I Reduce The Size Between Title And Subtext 03 Min

#2. Specific Text

First, you need to find the ID of the Block. Use below tool.

In my example, we will have the ID:

  • #block-yui_3_17_2_1_1722898813189_4140

How Do I Reduce The Size Between Title And Subtext 04 Min

Next, use this CSS code

#block-yui_3_17_2_1_1722898813189_4140 {
h1, h2, h3 {
margin-bottom: 0px;
}
h1+p, h2+p, h3+p {
margin-top: 0px;
}}

#3. Space on Mobile only

Use this CSS code

@media screen and (max-width:767px) {
h1, h2, h3 {
margin-bottom: 0px;
}
h1+p, h2+p, h3+p {
margin-top: 0px;
}}

#4. Space on Desktop Only

Use this CSS code

@media screen and (min-width:768px) {
h1, h2, h3 {
margin-bottom: 0px;
}
h1+p, h2+p, h3+p {
margin-top: 0px;
}}

#5. Space on One Page

First, you need to find the Page ID. Use tool in #2.

In my example, we will have ID:

  • #collection-66aef2caff007776a825a948

How Do I Reduce The Size Between Title And Subtext 05 Min

Next, use this CSS code

#collection-66aef2caff007776a825a948 {
h1, h2, h3 {
margin-bottom: 0px;
}
h1+p, h2+p, h3+p {
margin-top: 0px;
}}