Many thanks to mbrsolution for helping me through this.
the image was not actually responsive, it was just small enough to work on my phone’s screen.
After many hours of fiddling, the only way I could find to make everything responsive was to comment out the following areas of the catablog.css file shown below in bold:
.catablog-row .catablog-images-column {
/* float: left; */
/* position: relative; */
}
AND
.catablog-row .catablog-images-column /* .catablog-image img */ {
float: none;
max-width: none;
min-width: 0;
max-height: none;
min-height: 0;
}
The above changes to the catablog.css file along with the following additions to my child theme’s style.css are what worked:
/* BEGIN SECTION FOR CATABLOG CUSTOM */
.catablog-row {
width: auto !important;
}
.catablog-description {
margin: 0 auto 0 auto !important;
}
.catablog-images-column {
width: auto !important;
}
/* END SECTION FOR CATABLOG CUSTOM */
I know it’s better to modify the css via the child theme’s style.css, but I tried every possible combination, including fully copying each offending section into the child theme css, and changing the values to “none”, nothing worked. If anyone has any further ideas, I’m open to hearing them, but I am marking this as resolved.
