Image size on cellphones

[lostinspace]

On a page where I have two paragraphs that each have an image on the left, they are displaying correctly on desktop but are huge on cell.  Is it possible to constrain the size of the image on cellphones?  Code is below for the two paragraphs/images.

 

<!– wp:group –>

<!– wp:media-text {“mediaType”:”image”,”mediaWidth”:20,”verticalAlignment”:”top”} –>

<figure class=”wp-block-media-text__media”></figure>

<!– wp:heading {“level”:4} –>
<h4>Hudson Valley Psychodrama,LLC has been certified by NBCC as an Approved Continuing Education Provider, ACEP #6789. Programs that do not qualify for NBCC credit are clearly identified. Hudson Valley Psychodrama, LLC is solely responsible for all aspects of the program.</h4>
<!– /wp:heading –>

AND

<!– wp:media-text {“mediaId”:899,”mediaType”:”image”,”mediaWidth”:20} –>

<figure class=”wp-block-media-text__media”></figure>

<!– wp:heading {“level”:4} –>
<h4>HVPI offers NYS CE in collaboration with the Sociometric Institute. The Sociometric Institute is recognized by the NYSED’s State Boards for Social Work and Mental Health Practitioners as an approved provider of continuing education for licensed social workers #0268, licensed mental health counselors #MHC-0096, and licensed creative arts therapists #CAT-0046.</h4>
<!– /wp:heading –>

<!– /wp:media-text –>

[scrambler]

Please provide a link to the page with the issue

[Weaver]

Continuing Education

 

[scrambler]

This comes from the default styling of the block you used, which set the width to 100% of the area.

You can add the rule below to the theme Global Custom CSS rule box to set a maximum

.wp-block-media-text>figure>img {max-width:200px;}

and if you want it centered, change it to

.wp-block-media-text>figure>img {max-width:200px;display:block;margin:0 auto;}

 

[lostinspace]

Perfect!  Thank you.

[Adam95]

You can add the rule below to the theme Global Custom CSS rule box to set a maximum

.wp-block-media-text>figure>img {max-width:200px;}

[Author]

Posts