Any help on this?
I have a website in the Taste theme and have been able to format the blog pages to 3 columns instead of 2 using some code in the custom css portion of the theme customization.
Is there a way to set the images within the columns to maintain a certain aspect ratio or size? For example, our site’s blog page has images that are set to be 1198 x 958. Using an online aspect ratio calculator, I found that the Aspect Ratio is 599:479. Is there a way this will hold from computer screen to tablet to phone? The phone would have 1 column instead of 3 and tablet should have 2 columns with the aspect ratio of the image staying the same (so the image doesn’t get trimmed/cropped).
Can you post a store url and password if password protected. Also specifically point out the section of code you’re trying to figure out. Screenshots will help. It sounds like you’re using images like a background image, but what you want is actually to have the image output as it always should be and be responsive to the container.
Hi @janetgillis
Can you kindly share your store link (with the password, if any) with us? We will check it and suggest you a solution if possible.
https://www.familiesofcharacter.com/blogs/podcast is the URL. I don’t feel comfortable giving you my password. On the page given, you can see the images I’m talking about. They’re podcast thumbnails. As is on a computer, they are getting cut off and if you drag your browser window, you’ll see how the trim changes as the size of the window changes. I’d like the image to remain consisitent in it’s ratio so that the text on the image is never cut off despite the browser window size.
I’ve included some screenshots to help 
. Thanks for taking a look!
Hi @janetgillis
It is quite difficult to maintain your desired aspect ratio because it depends on many factors, but you can try adding this code at the end of the base.css file in the Edit code section so that the images are no longer cut.
.card__media .media img{
object-fit: fill !important;
}
Result:
Hope this helps.
