Website HTML these days need to be Mobile friendly, so if you are editing website content, it helps to understand how to write mobile friendly html.
Generally it is best to write simply formatted pages - that is - a flull width block of paragragh text, then a full width image, then another full width block of paragraph text.
But when we want to have images on the side of the text for large screens, and then for mobiles have these images go full width, we then need to start writing some extra code in the HTML to make this happen.
One easy way to write powerful html code is to use a framwork called "BootStrap". It was developed by the guys from Twitter. It allows us to do some clever formatting via <div> tags.
To see the html code - click on the "Code" tab, right left of the text editor window.
<div class="row"> <--- This is a start of a row
<div class="col-md-3"> <--- Start of a column (in a row)
<p><img src="/images/about/Rainfall.png" alt="Rainfall" width="100%" /></p> <--- Note: all images should be 100% width - and delete the height.
</div> <--- end of column
<div class="col-md-9"> <--- start of a new column (in a row)
<p>Rainfall is applied evenly across the model area and varies with intensity over the length of the storm...</p>
</div> <--- end of column
As you can see, it's much like HTML tables. But Tables are not mobile friendly, so webdesigners have moved away from these.
Also note that all images in "Mobile Friendly' pages have a width of 100%. This way the image will adjust to fit the formatting to match the size of the screen.
Delete the height value for images. If you don't, you will end up fixing the image hieght, and for changing widths the image will look weird (ie: it will lose its aspect ratio and will look stretched).