Resize featured collection hompage

Solved
tradingfxstore
Tourist
5 0 1

Hello to everyone.

i'm struggling with resizing on the homepage the featured collection part, and allign the price in another way. I'm gonna paste how it's now, and how I would want it.

Cattura01.PNG

  Cattura02.jpg

 

from 3 products to 4 large products, with the price under the neame, not near the name, and the name alligned on the left of the immage, not in center.

 

Can anyone help me?

0 Likes
dmwwebartisan
Shopify Partner
8335 1961 2639

@tradingfxstore 

Please share store URL!

Thanks!

If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
Natztech
Shopify Partner
1878 489 1170

hello @tradingfxstore 

Please provide website url and if your store is password protected then also provide password So I will check and provide a solution here.

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
dmwwebartisan
Shopify Partner
8335 1961 2639

@tradingfxstore 

please Go to Online Store->Theme->Edit code then go to assets/theme.scss.liquid ->paste below code at the bottom of the file.

@media screen and (min-width: 769px) {
.grid__item {padding-left: 0px !important;}
#shopify-section-featured-products .grid-uniform {
    clear: inherit !important;
}
}
If helpful then please Like and Accept Solution | Email: dmw.webartisan@gmail.com | Instagram: @dmw.webartisan
Check here PageFly App to customize your pages | Bag is a cart drawer that maximizes your sales. View app →
tradingfxstore
Tourist
5 0 1

Nothing happen.

0 Likes
Natztech
Shopify Partner
1878 489 1170

This is an accepted solution.

hello @tradingfxstore 


please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

@media only screen and (min-width: 729px){
#shopify-section-featured-products  .wrapper{
	    max-width: 100%;
}
#shopify-section-featured-products .grid-uniform{
	    display: flex;
       flex-wrap: wrap;
}
#shopify-section-featured-products .grid-uniform  .grid__item {
	flex: 0 0 25%;
}
#shopify-section-featured-products .grid-uniform  .grid__item  .product--wrapper{
	    max-width: 100%;
}
#shopify-section-featured-products .grid-uniform  .grid__item  .product--image{
	max-width: 100%;
    max-height: 100%;
}
}

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly
0 Likes
tradingfxstore
Tourist
5 0 1

You're the best

0 Likes
tradingfxstore
Tourist
5 0 1

@Natztech  do you know how can I modify the written too? 

tradingfxstore_1-1628236565567.png

 

to have it like this. price under the name alligned on the left

0 Likes
Natztech
Shopify Partner
1878 489 1170

This is an accepted solution.

hello @tradingfxstore 

please Go to Online Store->Theme->Edit code then go to assets/theme.css ->paste below code at the bottom of the file.

 

#shopify-section-featured-products .grid-uniform .grid__item   .grid-product__meta{
	    width: 39%;
	    text-align: left;
}
#shopify-section-featured-products .grid-uniform .grid__item  .grid-product__price-wrap .long-dash{
	display: none;
}

 

 

Want to theme customize contact us E-mail : natztech2312@gmail.com | Whatsapp
PageFly Advanced Page Builder visit pagefly