How to increase the size of a individual rich text heading (mobile only)

Store Design
1

Hi everyone,

I have added a rich text section to my homepage. I am only using the heading (no body copy) in this particular section. I am having trouble increasing the size of this heading on mobile only.

When I try and change the size of this heading I am changing the size of other headings on my website as well as heading sizes on the desktop version of my shopify store.

I have attached an image below and highlighted with a red rectangle what heading on mobile I need to increase.

I am using Debut theme.

Thank you for your help.

Tim.

Rich text heading.png
Rich text heading.png748×2787 246 KB

1 Like
2

@Timstar ,

Is this your store URL ?

https://www.skelotones.com/

I did not find the the section

3

@Timstar

sorry but i can’t see this section on home page can you please show me

4

@Timstar

yes, please try this code

  1. Go to Online Store->Theme->Edit code
  2. Asset->/theme.scss.liquid->paste below code at the bottom of the file.
@media only screen and (max-width: 749px){
/* Mobile Rich Section Title font size */
.rich-text__heading--medium h2 {
    font-size: 15px;
}
}

if need each rich section different side just add section id like below

@media only screen and (max-width: 749px){
/* Mobile Rich Each Section Title font size */
#shopify-section-1641009090602d1430 .rich-text__heading--medium h2 {
    font-size: 15px;
}
}
1 Like
5

Thank you for your help.

This worked great!

1 Like
6

@Timstar

its my pleasure to help us