Hi!
So thank you for the advice, but not all worked out or was quite what I meant.
Good point on using a smaller size. I went with large as the medium was very low res. I think you misunderstood what I meant by square image. My feature image is long rectangular, so I wanted to crop off the sides (or mock crop it) so that it appears square for the thumbnails. I was able to achieve this, but my issue now is that as I shrink the page, it looses it's squareness. I'm not sure if here is a way to modify my css to keep it square? Otherwise I suppose i'll have to make a much of different media queries to keep it square until it goes back to the original stacked version nicely. My current css is included at the end.
Switching does not work given the Maren skin is only for masonry. In the grid skins, I couldn't find anything that offered an image with content etc. So unfortunatly, that didn't help.
Yes as mentioned, media queries are set to achieve this.
So here is what I have below. My biggest problem now is just retaining the square and the right content lining up until the lower breakpoint. I tried using percents for the image without luck so it's currently set with px which isn't working ideally.
Thank you in advance
.tg-item-author {
display: none !important;
}
@media(min-width: 980px){
.main-blog-grid .tg-layout-masonry .tg-item-audio-poster, .main-blog-grid .tg-layout-masonry .tg-item-media-holder {
position: relative;
display: inline-block;
height: auto;
max-width: 33% !important;
outline: transparent solid 1px;
}
.main-blog-grid .maren .tg-item-content-holder {
position: relative;
display: inline-block;
padding: 22px 24px 14px 24px;
text-align: left;
width: 67%;
height: 100%;
min-height: 305px;
float: right;
margin: 0 !important;
}
.main-blog-grid article {
margin-bottom: 20px !important;
display: block !important;
position: relative !important;
top: 0 !important;
padding: 0 0 -10px 0 calc !important;
}
.main-blog-grid .tg-layout-masonry .tg-item-inner, img.tg-item-image {
position: relative;
height: auto;
display: block;
width: 100%;
margin: 0 !important;
max-height: 305px;
margin: 0;
outline: transparent solid 1px;
object-fit: cover !important;
height: 305px !important;
width: 305px !important;
}
.main-blog-grid .maren .tg-item-title, .maren .tg-item-title a {
font-size: 120%;
color: #00AF66 !important;
}
}