Shopify Dawn Theme Product Grid Spacing

[LeandroS]

Hello

I am building my new shopify store and have some problems with the Grid on the products.

I would like to change the spacing between the products (horizontal and vertical)

I am not able to find any code that worked.

The min. spacing is 4px on the editor but i want them to be really close together..

and also I would like the size of the price to be smaller and change the location of the 

thanks for the help!

[suyash1]

@LeandroS can you please give this webpage link?

[LeandroS]

https://r1vrxk-m4.myshopify.com/ 

I havent connected the final domain yet

[Made4uo-Ribe]

Thanks for the info, it password protected. 

[LeandroS]

its: siatwa

[suyash1]

@LeandroS please add this css to the very end of your base.css file and check,
Shopify Admin -> Online Store ->Theme -> Edit code -> base.css

@media screen and (max-width:749px){
.card__media{margin: 0 !important;    width: 100% !important;}
.card__information {padding-bottom: 0rem !important;}
}

[LeandroS]

I just tried it, it stays the same... nothing seems to change

[suyash1]

@LeandroS - not able to see it on browser view, can you please add again to check?

[Made4uo-Ribe]

Hi @LeandroS 

Please, share your store URL. Thanks!

[LeandroS]

https://r1vrxk-m4.myshopify.com/ 

I havent connected the final domain yet

[Made4uo-Ribe]

Thanks for the info, try this one. 

1. From your Shopify admin dashboard, click on "Online Store" and then "Themes".
2. Find the theme that you want to edit and click on "Actions" and then "Edit code".
3. In the "Assets" folder, click on "base.css, style.css or theme.css" file, depending on which file your theme uses to store its CSS styles. At the bottom of the file, add the following CSS code:

.grid.product-grid.grid--2-col-tablet-down.grid--4-col-desktop .card__media {
    margin: 0;
    width: 100%; 
}

.grid.product-grid.grid--2-col-tablet-down.grid--4-col-desktop .card__content {
    padding: 10px; 
}

.grid.product-grid.grid--2-col-tablet-down.grid--4-col-desktop .card__information {
    padding-bottom: 0; 
}

• And Save.
• Result:
• 

Your Feedback Matters! Please mark the solution and give likes to posts that helped you. Your appreciation fuels our motivation to assist you better! 

[LeandroS]

Hi thanks that worked great!

Is there a way to have the title of the product and the price of the product in the marked boxes in my screenshots?

and having the picture on mobile version going all the way to the edge?

[Made4uo-Ribe]

Got it, please add this code. 

Same instruction. 

@media only screen and (max-width: 989px){
.collection slider-component, .collection {
    padding-left: 0;
    padding-right: 0;
}
}

.grid.product-grid.grid--2-col-tablet-down.grid--4-col-desktop .card__information,
.grid.product-grid.grid--2-col-tablet-down.grid--4-col-desktop .card__content {
    padding-left: 0;
    padding-right: 0;
}

.product-grid .card__content .card__information {
    display: flex;
    justify-content: space-between;
}

.grid.product-grid .card__information .card-information {
    width: min-content;
}

.grid.product-grid .price {
    margin-top: 0 !important;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[LeandroS]

thank you, it worked! is it also possible to have it on the desktop version? that picture will be all the way to the edge?

and how can i adjust the text size from title and price so its all nice on one line?

[Made4uo-Ribe · Accepted solution]

Welcome, Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

- thank you, it worked! is it also possible to have it on the desktop version? that picture will be all the way to the edge?

Add this code same instruction. 

.collection.page-width {
    margin: 0;
    padding: 0;
    max-width: 100%;
}

And Save.

- and how can i adjust the text size from title and price so its all nice on one line?

/* size for titles */
.card__heading a {
    font-size: 12px;
} 
/* size for price */
.card-information .price {
    font-size: 12px;
}

And Save. 

Result:

Please don't forget to Like and Mark Solution to the post that helped you. Thanks!

[LeandroS]

thank you so much!

only problem i am having is the price.. its not on one line.. i found another website that has it the right way

is that also possible ?

[Made4uo-Ribe]

Can you share the theme where you implement the code? Just like to check if we can. Thanks!

[DaisyVo]

Hi @LeandroS 

I hope you are well. You can follow our instructions below:

1/ Shopify admin > Online store > Customize: https://prnt.sc/XQ6IDB99kUCd
2/ From the left menu > Theme settings > Open Custom CSS: https://prnt.sc/iDxwa8zBQ4Z-
3/ Copy the code below and paste it there

Here is the code for Step 3:

.card__information {
    padding-inline: 0 !important;
    display: flex;
}
.card__information > h3.card__heading {
    width: 50%;
}
.card__content {
    padding-inline: 0 !important;
}
.card__information > .card-information {
    width: 50%;
}
.card__information > .card-information .price {
    margin-top: 0 !important;
    font-size: 14px !important;
    justify-content: right !important;
    display: flex !important;
}

 

Please let me know if it works. Thank you!

Best,
Daisy - Avada Support Team.

[LeandroS]

Hi thanks for the reply! it works with desktop version but it looks a bit crooked on the mobile version... space between text and picture

is there a way to have the pictures going all the way to the edge pf the screen on left and right? so there will be more space for the titles and prices