How can I resize and align my homepage featured collection?

[tradingfxstore]

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.

  

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?

[Kinjaldavra · 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%;
}
}

[dmwwebartisan]

@tradingfxstore 

Please share store URL!

Thanks!

[Kinjaldavra]

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.

[tradingfxstore]

TradingFXStore | Home Page – tradingfxstore

password ohsewp

[dmwwebartisan]

@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;
}
}

[tradingfxstore]

Nothing happen.

[Kinjaldavra · 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%;
}
}

[tradingfxstore]

You're the best

[tradingfxstore]

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

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

[Kinjaldavra · 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;
}

[RHF]

@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)