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;
}
}