Media & Text block not responsive

I have just added the new Media & Text block to two pages of my Shapely theme website:
mot-iv.com/about-us/ and mot-iv.com/professional-portfolio/
It works great on desktop, but on mobile the headings go funny (too large) and the image sizes are too small.
On some iPads, the images are perfect but on others, the images go far too large and the block switches to column style, with the text underneath the image instead of beside it.
Is there something I can do to make this block responsive? Or some @media queries CSS I can add?
Many thanks!

Hello there,

I hope you are doing well today.

This CSS should help you:


@media only screen and (max-width: 900px) {
.has-large-font-size {
    font-size: 23px;
}
}

Best Regards,
Support

Thanks, this allows me to change the header font size in the mobile view, which is a good start. However, I still can’t change the paragraph text or resize the image in the mobile view… Any tips?
Thanks!

Hello there,

Try this:


@media only screen and (max-width: 900px) {
p.has-text-color.has-medium-font-size.has-very-light-gray-color {
    font-size: 12px;
}
figure {
    padding: 0px;
}

li {
    font-size: 11px;
}

h4 {
    font-size: 16px;

}
}

Best Regards,
Support