Hi there, I’m using Dawn 2.0 theme and the blog page had only two images across / row, and the images were huge. I wanted four images across / row, with smaller square featured images. I found this code from another thread re: blog grid layout, and added it to the bottom of my section-main-blog.css:
.article-card__image-wrapper .article-card__image {
padding-bottom: 100% !important;
}
@media (min-width: 1200px) {
.blog-articles {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.blog-articles > *:first-child,
.blog-articles > *:nth-child(4),
.blog-articles > *:last-child:nth-child(2),
.blog-articles > *:last-child:nth-child(5) {
grid-column: span 1;
}
}
It worked great! Only problem is, the featured blog images are not displaying in mobile or tablet (they show up fine on desktop/laptop). Check out this link on an iPhone or iPad to see what I’m talking about: https://madesafetest.myshopify.com/blogs/news
Can someone help fix my code to display the images on mobile and tablet? Thanks in advance for your help!
Hi @MadeSafely ,
I checked and don’t think the error is in the code you added. It may be the error of lazyloading the image, you can go to snippets > article-card.liquid file, find ‘article-card__image-wrapper’ and change code here:
Code:
Hope it helps!
Hi there, thank you so much for helping me find a solution to this. I have added the code exactly like you suggested, and unfortunately the images are still not showing up in mobile or tablet. Any other ideas?
Hi @MadeSafely ,
Can you disable hueapps app and check again? Because everything was almost perfect, it could be the app filter.
If you turn it off and it still doesn’t show up, please send me the staff account, I’ll help you check it directly
I turned the hueapps on and off, and it did not change the display. How can I send you staff account access?
The only thing that I did that changes the display is taking out the code I added to make a 4-across grid blog layout. When I add this code, the images don’t display in mobile or tablet. When I remove it again, the images come back (but then it goes back to the old 2-across grid blog layout).
It has something to do with this code (added to the bottom of “section-main-blog.css”):
.article-card__image-wrapper .article-card__image {
padding-bottom: 100% !important;
}
@media (min-width: 1200px) {
.blog-articles {
grid-template-columns: 1fr 1fr 1fr 1fr;
}
.blog-articles > *:first-child,
.blog-articles > *:nth-child(4),
.blog-articles > *:last-child:nth-child(2),
.blog-articles > *:last-child:nth-child(5) {
grid-column: span 1;
}
}
Hi @MadeSafely ,
I sent an email via private message, please check it
Just sent you the access invite. Thank you for helping me with this!
Hi @MadeSafely ,
Please remove code, it will work fine:
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
2 Likes
This worked! Thank you so much for your help!
1 Like
