View Single Post
Old 09-25-2023, 05:06 PM   #7
azimuth
Enthusiast
azimuth plays well with othersazimuth plays well with othersazimuth plays well with othersazimuth plays well with othersazimuth plays well with othersazimuth plays well with othersazimuth plays well with othersazimuth plays well with othersazimuth plays well with othersazimuth plays well with othersazimuth plays well with others
 
Posts: 33
Karma: 2538
Join Date: Aug 2023
Location: NW US
Device: none
The heading elements <h_> by default is block-level, which means it spreads full line width. It can be assumed that Moon+ is merely holding to the standards expected for the <h2> element and making your image also spread full line width regardless of your CSS.
And...you likely don't want the image to be 1em tall - that's the height of the words on that line, and your image is a fully detailed designed image that can only be viewed when its larger than 1em.
So...set the image outside of the <h2> element, and use the <img> tag as Quoth suggested: width: 50%; height: auto; .
Read the following at Mozilla.

MDN heading

MDN block image
azimuth is offline   Reply With Quote