Separate heading sizes for desktop and mobile for 'image with text' section

[visualess]

Hi,

I am trying to make the heading in the image with text section smaller so it doesn't get cut off, but I want to keep it the size it currently is on desktop. This is the code I am currently using in base.css but the mobile heading size doesn't seem to be changing. 

Can anybody help?

TIA!

/* IMAGE WITH TEXT SIZE mobile */
@media all and (min-width: 750px) {
.image-with-text__heading {
font-size: 14px;
}
}

/* IMAGE WITH TEXT SIZE desktop */
.image-with-text__heading {
font-size: 28px;
}
}

  

[devcoders]

Hi @visualess 

- Go to Online Store -> Theme -> Edit code.
- Find the file assets/base.css and paste the code below at the bottom of the file.

/* IMAGE WITH TEXT SIZE - mobile */
@media all and (max-width: 750px) {
  .image-with-text__heading {
    font-size: 14px;
  }
}
/* IMAGE WITH TEXT SIZE - desktop */
.image-with-text__heading {
  font-size: 28px;
}

[PageFly-Richard]

This is Richard from PageFly - Shopify Page Builder App

Hi @visualess  Please add code here to fix it:

Step 1: Online Stores > Themes > Edit code

Step 2: Choose file theme.liquid
Step 3: Add code above the tag </body>

@media all and (max-width: 767px) {
  .image-with-text__heading {
    font-size: 14px !important;
  }
}

.image-with-text__heading {
  font-size: 28px;
}

Hope my solution will help you resolve the issue.

Best regards,

Richard | PageFly

[Made4uo-Ribe]

Hi @visualess 

Check this one. 

/* IMAGE WITH TEXT SIZE mobile */
@media all and (max-width: 749px) {
    .image-with-text__heading {
        font-size: 14px;
    }
}

/* IMAGE WITH TEXT SIZE desktop */
.image-with-text__heading {
    font-size: 28px;
}

And save. 

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!