Correct spacing in "You may also like" section

Store Design
1

Hey,

Can someone help me please correct the spacing between the “You may also like” section on my website for desktop and mobile

It looks like the below image but they need to be side by side

If you could help me out that would be very much appreciated :slightly_smiling_face:

URL: https://fieralabel.com.au/products/specter

Password: Taitoko_09

Thank you very much in advance!

Website View:

anastaitoko_0-1630207659805.png
anastaitoko_0-1630207659805.png1012×742 59.9 KB

Mobile View:

anastaitoko_1-1630207686392.png
anastaitoko_1-1630207686392.png205×749 26.2 KB

2

@anastaitoko

please Go to Online Store->Theme->Edit code then go to assets/timber.scss.liquid ->paste below code at the bottom of the file.

@media only screen and (min-width: 769px){
.grid-uniform .large--five-tenths:nth-child(2n+1), .grid-uniform .large--four-eighths:nth-child(2n+1), .grid-uniform .large--four-twelfths:nth-child(3n+1), .grid-uniform .large--one-fifth:nth-child(5n+1), .grid-uniform .large--one-half:nth-child(2n+1), .grid-uniform .large--one-quarter:nth-child(4n+1), .grid-uniform .large--one-sixth:nth-child(6n+1), .grid-uniform .large--one-third:nth-child(3n+1), .grid-uniform .large--one-twelfth:nth-child(12n+1), .grid-uniform .large--six-twelfths:nth-child(2n+1), .grid-uniform .large--three-sixths:nth-child(2n+1), .grid-uniform .large--three-twelfths:nth-child(4n+1), .grid-uniform .large--two-eighths:nth-child(4n+1), .grid-uniform .large--two-sixths:nth-child(3n+1), .grid-uniform .large--two-twelfths:nth-child(6n+1) {
    clear: inherit !important;
}
}

@media only screen and (max-width: 590px){
.grid-uniform .small--five-tenths:nth-child(2n+1), .grid-uniform .small--four-eighths:nth-child(2n+1), .grid-uniform .small--four-twelfths:nth-child(3n+1), .grid-uniform .small--one-fifth:nth-child(5n+1), .grid-uniform .small--one-half:nth-child(2n+1), .grid-uniform .small--one-quarter:nth-child(4n+1), .grid-uniform .small--one-sixth:nth-child(6n+1), .grid-uniform .small--one-third:nth-child(3n+1), .grid-uniform .small--one-twelfth:nth-child(12n+1), .grid-uniform .small--six-twelfths:nth-child(2n+1), .grid-uniform .small--three-sixths:nth-child(2n+1), .grid-uniform .small--three-twelfths:nth-child(4n+1), .grid-uniform .small--two-eighths:nth-child(4n+1), .grid-uniform .small--two-sixths:nth-child(3n+1), .grid-uniform .small--two-twelfths:nth-child(6n+1) {
    clear: inherit !important;
}
}

Thanks!

3

@dmwwebartisan Amazing!

I nearly want to cry! :')

Thank you very very much

4

@anastaitoko

Thank You

5

@dmwwebartisan Done - thank you again