FROM CACHE - en_header

CSS on lists

fabshopco
Tourist
12 0 2
I was looking to put a border around my image product title and price, I think it looks way more organised this way on other sites.

I’m using the simple theme
Replies 14 (14)
Jasoliya
Shopify Expert
4533 586 1147

Hi,

Send me your store url so i can check

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
fabshopco
Tourist
12 0 2
Jasoliya
Shopify Expert
4533 586 1147

Hi,

On which section you want to add border? Specify exact.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
fabshopco
Tourist
12 0 2

Thank you for your reply Jasoliya,  On all my product lists,   you have an image, breif description and price.  I waned to place these all inside a box with gray boder https://fabshop.co/collections/beauty

 

I also notice that some of my images render different size so not everything is aligned,  i would like all the images to render one size so all the rows are neat, tidy and aligned.

 

Please see the following website that has what i am looking to achive https://themodernshop.com/collections/accessories-1/Bathroom

Jasoliya
Shopify Expert
4533 586 1147

Hi,

Please follow this:

1. Go to Online Store->Theme->Edit code
2. Asset->theme.scss->paste bellow code in bottom of file

.grid--uniform>.grid__item{     margin-bottom: 12px !important;padding: 1.25rem;width: calc(25% - 12px);margin-top: 12px;margin-left: 12px;border: 1px solid rgba(127,127,127,0.16);}
.grid.grid--uniform{display: flex;flex-wrap: wrap;margin-left: -12px;}

 @media only screen and (max-width: 600px) {
    .grid--uniform>.grid__item{width: calc(50% - 12px) !important;} 
    }

Let me know if you need help

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
fabshopco
Tourist
12 0 2

Thank you Jasoliya,  

 

Slight issue,  if you look at the collectionl ist here https://fabshop.co/  i did not want the border on the"collection list",  only on the actul "collection pages"

 

Also your code stopps me from changing items per row??? 

Jasoliya
Shopify Expert
4533 586 1147

Hi,

Replace this: 

#shopify-section-collection-template .grid--uniform>.grid__item{margin-bottom: 12px !important;padding: 1.25rem;width: calc(25% - 12px);margin-top: 12px;margin-left: 12px;border: 1px solid rgba(127,127,127,0.16);}
#shopify-section-collection-template .grid.grid--uniform{display: flex;flex-wrap: wrap;margin-left: -12px;}

 @media only screen and (max-width: 600px) {
    #shopify-section-collection-template .grid--uniform>.grid__item{width: calc(50% - 12px) !important;} 
    }

If you want to make grid of 3 product then change bellow:

width: calc(25% - 12px);

to

width: calc(33% - 12px); 

Let me know if you need help

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
fabshopco
Tourist
12 0 2

This means the sliders to change items per row no longer work???

 

Also it looks like we are now controling colllection and collection list from same rule.   

 

As mentioned i dont want the fgrey border arround my collection, only collection list page?????

Jasoliya
Shopify Expert
4533 586 1147

You have not added my given last code.

#shopify-section-collection-template .grid--uniform>.grid__item{margin-bottom: 12px !important;padding: 1.25rem;width: calc(33% - 12px);margin-top: 12px;margin-left: 12px;border: 1px solid rgba(127,127,127,0.16);}
#shopify-section-collection-template .grid.grid--uniform{display: flex;flex-wrap: wrap;margin-left: -12px;}

 @media only screen and (max-width: 600px) {
    #shopify-section-collection-template .grid--uniform>.grid__item{width: calc(50% - 12px) !important;} 
    }

Replace this code.

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
fabshopco
Tourist
12 0 2

sorry your instruction is confusing,  may be easier if you paste new code rather tjan discuss replace which is confusing,  sorry and excuse but im still learning code.

 

Be easier just to replace whole paragraph of code,  are you able to provide?

 

 

Jasoliya
Shopify Expert
4533 586 1147

You just need to place this code in your theme.scss file

#shopify-section-collection-template .grid--uniform>.grid__item{margin-bottom: 12px !important;padding: 1.25rem;width: calc(33% - 12px);margin-top: 12px;margin-left: 12px;border: 1px solid rgba(127,127,127,0.16);}
#shopify-section-collection-template .grid.grid--uniform{display: flex;flex-wrap: wrap;margin-left: -12px;}

 @media only screen and (max-width: 600px) {
    #shopify-section-collection-template .grid--uniform>.grid__item{width: calc(50% - 12px) !important;} 
    }

Text me on Skype(jasoliya.brijesh) so i can guide you instantly. 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
fabshopco
Tourist
12 0 2

Thank you for this removed the gray border from arrount the home page but kept on the collections like we wanted. 

 

However the slider does still not work - look at the image below i have set teh slider for "Collections Per Row" to 4 and it does not change???

 

I would rather this worked and not having to edit code as i develop further.

 

example.PNG

Jasoliya
Shopify Expert
4533 586 1147

Hi,

 - look at the image below i have set teh slider for "Collections Per Row" to 4 and it does not change???

>> If you want change grid from theme editor then have to make all code dynamic that i have done, this is development task and you have to hire developer for that.

If you need any help then text me on Skype(jasoliya.brijesh) 

Want to modify or custom changes on store hire me.
Want to convert visitor to buyers ? try This app.
Email: jasoliyabrijesh123@gmail.com Or WhatsApp Or Skype: jasoliya.brijesh
Want to get Free review and advice for sale on store ?? just text me here
ginamarie
Excursionist
29 0 2

Hi! Is this intended to change all product images of various sizes to one size? I'm currently using an app, but would like to cut my monthly expenses and insert code to do this automatically for me. Your advice is much appreciated! Thank You!