Media With Content Split: Ability to adjust the text size on mobile and desktop separately#110

This section has a little problem, as the content text doesnt scale with desktop to mobile format. On mobile the larger text (necessary for desktop) remains, being way too large for mobile screens. It would be better if the text scaled down on smaller screens.

I had this same problem. For a quick fix, i added some custom css to the section and manually altered the font sizes there:

@media only screen and (max-width: 768px) .section-blocks__accent font-size: 14px;
}
.section-blocks__heading font-size: 32px;
line-height: 1.3;
letter-spacing: -0.5px;
}
.section-blocks__text font-size: 18px;
}
}

(just change it to whatever you need. I’m not a coder, i just needed a quick solution)

Thank you for this suggested code solution! It looks like some of your curly brackets/ braces were dropped when pasting the code in, so I am going to add your code inside a code-block which should preserve the code in its entirety:

@media only screen and (max-width: 768px) {
  .section-blocks__accent {
    font-size: 14px;
  }
  .section-blocks__heading {
    font-size: 32px;
    line-height: 1.3;
    letter-spacing: -0.5px;
  }
  .section-blocks__text {
    font-size: 18px;
  }
}

As with all custom code, we recommend testing this out on an unpublished copy of your theme.