PALO ALTO: CHANGE FEATURED BLOG SIZE TO SQUARE AND MOVE TITLE TO THE BOTTOM OF THE IMAGE.

Solved
Lanchaster_91
Excursionist
23 1 3

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

 

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

Accepted Solution (1)

Accepted Solutions
LitExtension
Shopify Partner
1975 329 404

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.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Replies 7 (7)
LitExtension
Shopify Partner
1975 329 404

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!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
Lanchaster_91
Excursionist
23 1 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?

LitExtension
Shopify Partner
1975 329 404

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.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
Lanchaster_91
Excursionist
23 1 3

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_1-1637209947266.png

 

LitExtension
Shopify Partner
1975 329 404

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!

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!
LitExtension
Shopify Partner
1975 329 404

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.

LitExtension - #1 Shopping Cart Migration Expert
If our answer is helpful then please accept as solution!
Are you looking for a solution to migrate to Shopify? Contact us for further assistance.
Try our FREE DEMO now!

View solution in original post

Lanchaster_91
Excursionist
23 1 3

awesome, thank you for your help everything work.