Shopify themes, liquid, logos, and UX
Hi,
Is there a way to change the featured blog to a square image instead of the rectangle and move the title to the below of the image?
Here's the link to the store: https://stoned-and-co-online.myshopify.com/
Solved! Go to the solution
This is an accepted solution.
Hi @Lanchaster_91,
And please add code:
.blog-item__article{
height: auto !important;
}
.blog-item__article__link{
height: 544px !important;
}
Refer https://i.imgur.com/QuexblW.png
Hope it is clear to you.
Hi @Lanchaster_91,
Please follow these steps:
- Step 1: Go to Online store > Themes > Actions > Edit code.
- Step 2: Go to Assets > theme.css and paste this at the bottom of the file:
.blog-item__article{
height: auto !important;
}
.blog-item .overlay{
display: none !important;
}
.blog-item__article__image{
height: 0 !important;
padding-bottom: 100%;
}
.blog-item__article__content{
position: relative !important;
padding: 15px !important;
text-align: center;
}
.blog-item__article__title{
color: var(--heading) !important;
}
Hope it helps!
Hi LitExtension,
Thanks that works.
Is it possible to get the code just to move the title to the bottom without making the image square?
Hi @Lanchaster_91,
You just need to remove this code, the image will not show square: https://i.imgur.com/AeIMjhc.png
If it helped you solve your issue, please mark it as a solution. Thank you and good luck.
Hi, I have made the suggested changes but the title is not appearing on the bottom on the image.
Hi @Lanchaster_91,
I checked and your code is really messed up by previously added codes.
You need to add closing tags "}" to it, it will work fine: https://i.imgur.com/gYUtH5u.png
Hope it helps!
This is an accepted solution.
Hi @Lanchaster_91,
And please add code:
.blog-item__article{
height: auto !important;
}
.blog-item__article__link{
height: 544px !important;
}
Refer https://i.imgur.com/QuexblW.png
Hope it is clear to you.
awesome, thank you for your help everything work.
Portrait of Stephen positioned next to an image of planet Earth, with the Stephen's World ...
By JasonH Mar 18, 2024Digital marketers and app developers have tracked activity in apps and websites for yea...
By Ollie Mar 13, 2024February was an exciting month with Shopify Editions, informative webinars, and more! F...
By JasonH Mar 7, 2024