How to fix the space between the heading and description in multicolum section?

Store Design
, ,

Topic summary

A user needed to reduce excessive spacing between headings and descriptions in a multicolumn section, particularly problematic on mobile views. Their initial CSS targeting .stat-block elements didn’t resolve the issue.

Solution provided:

  • Add custom CSS via the theme.liquid file
  • Insert code snippet above the </body> tag in Online Store > Edit Code
  • The CSS targets spacing between heading and description elements

Outcome:
The solution successfully reduced the spacing. The fix was confirmed working by the original poster, resolving the mobile layout concern.

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

Hello, my client said the space between the heading and description is too wide, so the section looks too long in the mobile view. How can I fix it with some custom CSS or something else? I used the code below, but it didn’t work.

Screenshot 2025-05-29 at 5.15.43 PM.png
Screenshot 2025-05-29 at 5.15.43 PM.png1065×420 38.9 KB

.stat-block h3 {
  margin-bottom: 2px;
}
.stat-block p {
  margin-top: 0;
}
h3 {
  font-size: 55px;
  font-weight: 900;
  letter-spacing: -0.5px;
  margin-bottom: 0;
}
p {
  font-size: 30px;
  font-weight: 700;
  color: #93859f;
  letter-spacing: -0.5px;
  margin-top: 0;
} /*Section Border*/
1 Like
2

Hey @poshpush

Follow these Steps:

  1. Go to Online Store

  2. Edit Code

  3. Find theme.liquid file

  4. Add the following code in the bottom of the file above tag

RESULT:

Moeed_0-1748506696708.png
Moeed_0-1748506696708.png1200×197 10.5 KB

If I managed to help then, don’t forget to Like it and Mark it as Solution!

Best Regards,
Moeed

1 Like
3

Thank you @Moeed it worked!

1 Like
4

Thank you for your reply. I’m glad to hear that the solution worked well for you. If you require any more help, please don’t hesitate to reach out. If you find this information useful, a Like would be greatly appreciated.