How can I resize and align my homepage featured collection?

Store Design
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
Cattura01.PNG1898×707 110 KB

Cattura02.jpg
Cattura02.jpg1900×942 120 KB

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?

2

@tradingfxstore

Please share store URL!

Thanks!

1 Like
3

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.

2 Likes
4

TradingFXStore | Home Page – tradingfxstore

password ohsewp

1 Like
5

@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;
}
}
1 Like
6

Nothing happen.

7

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%;
}
}
8

You’re the best

9

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

tradingfxstore_1-1628236565567.png
tradingfxstore_1-1628236565567.png296×121 9.09 KB

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

10

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;
}
1 Like
11

@Kinjaldavra I’m using the dawn theme where do i put the code to resize the homepage collection (i dont see theme.css in this theme)