https://community.shopify.com/c/shopify-design/help-us-help-you/td-p/668159
That can end up being a lot of work because things need to go somewhere and your ultimately scaling things down from sizes suitable for desktop and mobile to a size possibly very unsuitable even on mobile.
try the following CSS bandaid based on the demo of spark, your theme may vary drastically:
Place in that sections custom css feature avoid editing CSS files directly when possible.
Read: https://help.shopify.com/en/manual/online-store/themes/theme-structure/extend/add-css
Hide the duplicate text box meant for mobile:
.mosaic-grid__item+.mosaic-grid__text-container {
display: none;
}
Display the original text overlay box used for desktop mosaic display:
Because more is being crammed into less there will be a domino effect of styles in showing this overlay that will have to be worked out to adjust the size of things inside the overlay.
.mosaic-grid__text-container {
display: block;
background-color: var(--color-text-container-background);
}
Theses styles are basically the inverse of media query rules in theme.scss.css using similar selectors(.mosaic-grid__text-container)
If you need deeper tailoring you can contact me for customization services. Please provide context: store url, theme name, post url and any further detail. Contact Info in signature.