Grid Item space

Solved

Grid Item space

TBS2023
Shopify Partner
109 1 7

Hello

 

I would like to add some spacing between my grid items

but when i do- the item falls back down a row

can you please help

 

https://thebodyshop.com.lb/pages/range

dosawr

TBS2023_0-1718373648779.png

 

Accepted Solution (1)

BSSCommerce-HDL
Shopify Partner
1134 392 460

This is an accepted solution.

Hi @TBS2023

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718375085110.png

 

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tags

BSSCommerceHDL_1-1718375111856.png

 

@media only screen and (min-width: 769px) {
    .medium-up--one-third {
        width: calc(33.33333% - 10px) !important;
        margin-left: 10px !important;
    }
}

 

Here is result: 

BSSCommerceHDL_2-1718375221811.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

View solution in original post

Replies 4 (4)

BSSCommerce-HDL
Shopify Partner
1134 392 460

This is an accepted solution.

Hi @TBS2023

Step 1: Go to Shopify Admin -> Online Store ->Theme -> Edit code

BSSCommerceHDL_0-1718375085110.png

 

Step 2: Search file theme.liquid

Step 3: Inside head tags. You need create style tags. After insert my code inside style tags

BSSCommerceHDL_1-1718375111856.png

 

@media only screen and (min-width: 769px) {
    .medium-up--one-third {
        width: calc(33.33333% - 10px) !important;
        margin-left: 10px !important;
    }
}

 

Here is result: 

BSSCommerceHDL_2-1718375221811.png

Hope this can help you,

If our suggestions are useful, please let us know by giving it a like or marking it as a solution. Thank you 😍

 

 

If our suggestions are useful, please let us know by giving it a like, marking it as a solution, or donating here .


B2B Solution & Custom Pricing | Product Labels by BSS


Need help from our expert? Kindly share your request with us via community@bsscommerce.com


BSS Commerce - Full-service eCommerce Agency

Made4uo-Ribe
Shopify Partner
6999 1665 2057

Hi @TBS2023 

Check this one. 

From your Shopify admin dashboard, click on "Online Store" and then "Themes".

Find the theme that you want to edit and click on "Actions" and then "Edit code".

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:

 

@media only screen and (min-width: 769px) {
    .medium-up--one-third {
        padding: 0 5px;
    }
}

 

And Save. 

Result:

Made4uoRibe_0-1718375910034.png

 

If this fixed your issue Likes and Accept as Solution is highly appreciated. Coffee tips fuels my dedication.
Get EXPERIENCED Shopify developers at affordable rates—visit Made4Uo.com for quick quote!
Do not lost your Shopify store! Get FREE trial with ✔️ Rewind Backup: Automatic, reliable, stress-free.
Need THEME UPDATES but has custom codes? No worries, contact us for affordable price.

Vinsinfo
Shopify Partner
352 125 118

@TBS2023 Please follow the below steps to add some spacing between the grid items. Let me know whether it is helpful for you.

 
1. Go to "Online stores" -> "Themes".
2. Click action button from the current theme and select "Edit code".
3. Search "theme.css" file and paste below code at the bottom of the file like in the below attached screenshot.
NOTE: You can modify the value of the "padding-left" as per your need.

 

.grid.grid--uniform .grid__item {
  padding-left: 20px;
  width: 33%;
}

 

Vinsinfo_1-1718376382846.png

 

4. Final Result will be like,
Vinsinfo_0-1718376373485.png

 

 

Please provide your support by click "Like" and "Accepted" if our solution works for you. Thanks for your support.
Please reach out to bizdev@vinsinfo.com for any enquires related to Shopify.
Our Services: Custom Theme Development, Theme Customization, Custom Feature Implementation, Data Migration, Custom APP Development, Website Optimization and Google Merchant Center Support
TBS2023
Shopify Partner
109 1 7

Unfortunately nothing happened!