How to increase space between rich text heading and description on desktop only?

Store Design
, ,

Topic summary

A user seeks to add spacing between a rich text heading (“How It Looks”) and the product media above it on their product page, but only on desktop devices.

Initial Solutions Provided:

  • Multiple contributors suggested adding CSS code to base.css targeting .rich-text__heading or .inline-richtext h1 with margin adjustments
  • Early solutions affected both mobile and desktop, which wasn’t the desired outcome

Desktop-Only Solutions:
Several users provided media query-based CSS targeting desktop screens (min-width: 990px):

  • Adding margin-top: 5rem !important to h2.rich-text__heading.rte.inline-richtext h1
  • Alternative approach: inserting custom CSS in theme.liquid file before the </body> tag with @media screen and (min-width: 990px) wrapper

Status:
The discussion remains open with no confirmation from the original poster about which solution worked. Multiple valid approaches were offered using either base.css modifications or theme.liquid custom styling.

Summarized with AI on November 13. AI used: claude-sonnet-4-5-20250929.
1

https://charmente.com/products/v-back-flared-jumpsuit

I want there to be more space between “How It Looks!” and the stuff above it.

Screenshot 2023-12-29 at 12.34.13 AM.png
Screenshot 2023-12-29 at 12.34.13 AM.png1602×464 162 KB

2

Hi @Simon159 , Add the following code to base.css :

h2.rich-text__heading.rte.inline-richtext.h1 {
    margin-bottom: 5rem !important;
}
3

@Simon159 Go to Online Store > Live Theme > Edit Code > search for base.css > search .isolate word(class) and add this css code margin-top: 50px;

and save the base.css file. That’s it!

4

that also affected mobile, i would like it to only affect desktop version of my site.

5

I want there to be more space between “How It Looks” and the media above it, which is the product description. That code made their be more space between “How It Looks” and the text below it.

1 Like
6

@Simon159 , Add the following code :

@media(min-width:990px){
 h2.rich-text__heading.rte.inline-richtext.h1 {
    margin-top: 5rem !important;
}

}
7

@Simon159 Please add below code -

@media (max-width: 767px){
.isolate {
    margin-top: inherit;
}
}

Please let me know if works!

8

Hello @Simon159

You can add code by following these steps

  1. Go to Online Store → Theme → Edit code.

  2. Open your theme.liquid file

  3. Paste the below code before on theme.liquid

@media screen and (min-width:990px){ h2.rich-text__heading.rte.inline-richtext.h1 { margin-top: 3rem; } }

techlyser_web_1-1703833979326.png
techlyser_web_1-1703833979326.png967×275 68.1 KB

9

Hello @Simon159 ,

Please add the below mentioned code for providing the space between product description & ‘How it Looks’ section.

Steps -:

  1. Go to the “Online Store” → Themes and then click edit code https://prnt.sc/bMYhLWJhpAks

  2. Now, Search for the theme.liquid file and open it.

  3. Next, add the below mentioned code at the bottom of the file before tag.
  1. Save the code.

Output will be like this = https://prnt.sc/grsqOCijS5Bt

I hope this helps you.

Please let me know if you have any query.

Thank you.