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

Store Design
, ,
1

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;
}
}

Screenshot 2024-09-21 at 19.05.04.png
Screenshot 2024-09-21 at 19.05.04.png834×748 90.7 KB

Screenshot 2024-09-21 at 19.05.12.png
Screenshot 2024-09-21 at 19.05.12.png2118×590 112 KB

2

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;
}
3

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 

@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

4

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!