Palo alto: change featured blog size to square and move title to the bottom of the image

Store Design
1

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?

Lanchaster_91_0-1637114249653.png
Lanchaster_91_0-1637114249653.png1346×606 379 KB

Here’s the link to the store: https://stoned-and-co-online.myshopify.com/

2

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!

1 Like
3

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?

4

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.

1 Like
5

Hi, I have made the suggested changes but the title is not appearing on the bottom on the image.

Lanchaster_91_0-1637209926483.png
Lanchaster_91_0-1637209926483.png1356×682 183 KB

Lanchaster_91_1-1637209947266.png
Lanchaster_91_1-1637209947266.png611×236 9.71 KB

6

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!

1 Like
7

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.

1 Like
8

awesome, thank you for your help everything work.