Proper way to change style?

First, thanks for making this plug-in ?? I wish I had the skill to do something like that for rescue groups.

I’m using the plugin to display a list of adoptable pets and my site is using the Twenty-Fourteen theme.

I don’t know enough about development or CSS to know how I can properly make changes to the style. I’ve seen some other posts where people have made changes, but I don’t have the base knowledge of where to start to make the changes.

When the pets are listed, if the image is not wide enough to fill the content area, rows of text with only a few characters each appear to the right of the large image (500px).
For my purposes, I’m ok with all text appearing below the images, rather than floating.

In the petfinder.css, the original code I found that I would need to modify is:

div.dog .images{
float: left;
margin-right: 15px;
margin-bottom: 15px;
margin-top: 5px; /**** this helps align image with top of text better ****/
}

I changed the float to “none”. Now, all text appears below image, regardless of image width, which is what I wanted.

I know if the plugin is updated, this change will be overwritten.

Is there some detailed steps you can point me to, that would walk me through properly making this change so it doesn’t get overwritten?

Assuming I don’t break something, here’s one of the pages that displays the pets: https://adoptapetfm.org/blog/dogs/

Thanks,
gary

https://www.ads-software.com/plugins/petfinder-listings/