FROM CACHE - en_header

I made a change to my assets code and now my site is broken.

Solved
Woolnerd13
Tourist
6 0 1

Hello, I tried to edit my assets under style.scss.liquid to display two items per row in mobile, with the following code; .collection-grid .medium-up--one-half {
width: 50%;
}

 

It did not fix the issue and when I tried to edit the code back to the original state the website display is seriously altered. www.borealiswoolco.com

 

Here is snapshot of where I tried to edit the code: 

Screen Shot 2022-03-08 at 10.07.03 PM.png

 Thank you so much in advance!

 

 

****Update***

I've deleted the small bit of custom code beneath the "Custom Code Below Here" line and the site is now functioning properly. However, I would like to be able to re-enter the custom code in the correct format to get those changes active again. Can someone please have a look at it and see where the error(s) are?

 

Thanks folks!

Accepted Solutions (3)

Accepted Solutions
made4Uo
Shopify Partner
2589 474 704

This is an accepted solution.

Hi @Woolnerd13 ,

 

You just need to use display grid. In your style.css add the code below.

 

@media only screen and (max-width: 481px) {
.grid.product-list {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
}
}

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.

View solution in original post

made4Uo
Shopify Partner
2589 474 704

This is an accepted solution.

Hi @Woolnerd13 ,

 

Try to remove this two curly brackets. I don't think there should be curly brackets there. Check the image below.

 

highlighted the two bracketshighlighted the two brackets

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.

View solution in original post

made4Uo
Shopify Partner
2589 474 704

This is an accepted solution.

Sorry. It is me. It should be display, not dsiplay.  Corrected the code below. 

 

.grid.product-list.clearfix::before {
display: none !important;
}

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.

View solution in original post

Replies 9 (9)
Woolnerd13
Tourist
6 0 1
made4Uo
Shopify Partner
2589 474 704

This is an accepted solution.

Hi @Woolnerd13 ,

 

You just need to use display grid. In your style.css add the code below.

 

@media only screen and (max-width: 481px) {
.grid.product-list {
display: grid !important;
grid-template-columns: 1fr 1fr !important;
}
}

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
Woolnerd13
Tourist
6 0 1

Thanks for this. I assume this addresses the display of two items per row on mobile issue?

 

Could you please also look at the existing custom code from my screen shot and see if there are any errors there?

Woolnerd13
Tourist
6 0 1

Yup this works for the display issue! However, it did not evenly distribute the rows and so there is a blank item on both the top and bottom row, which are the only rows displaying only one item. How can I fix this?

made4Uo
Shopify Partner
2589 474 704

This is an accepted solution.

Hi @Woolnerd13 ,

 

Try to remove this two curly brackets. I don't think there should be curly brackets there. Check the image below.

 

highlighted the two bracketshighlighted the two brackets

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
made4Uo
Shopify Partner
2589 474 704

Hi @Woolnerd13 ,

 

This is because of the clearfix pseudo. We can hide the :before. Just add this code below. 

 

.grid.product-list.clearfix::before {
dsiplay: none !important;
}
Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
Woolnerd13
Tourist
6 0 1

 Hmm, so I've added the code but I still have the blank rows on mobile. Maybe there is an error in how I entered it?

Screen Shot 2022-03-08 at 11.01.41 PM.png

made4Uo
Shopify Partner
2589 474 704

This is an accepted solution.

Sorry. It is me. It should be display, not dsiplay.  Corrected the code below. 

 

.grid.product-list.clearfix::before {
display: none !important;
}

 

Just be reminded that we are volunteering to help.
✿✿✿-

Likes  

and

 Accept as Solution

  will be much appreciated.✌-✿✿✿
For more Shopify Solutions and custom codes, just visit

 Made4Uo's website

.
Keep your stuffs private. Refrain from giving unnecessary access to your store.
Woolnerd13
Tourist
6 0 1

Wow, incredible. You have saved me a lot of worry! This is my first time changing code, and somehow with your help I have got it right! Thank you Made4Uo!