3 Column Product Block View on Mobile

Site URL: https://tellemoi.co.uk/new-index

Hi there, I am going crazy trying to get the 3 product blocks to sit side by side in mobile view, I've attempted a few codes and tried to identify the blocks and input, however still not able to get it to stay in place. I found adjusting the CSS to .product-blocks did help. However this did not last and reverted back.

I could really do with some assistance. Thank you in advance!

Add to Home > Design > Custom CSS

/* 3 columns mobile */
@media screen and (max-width:767px) {
div#page-5fb8554758f7584e710bd7be .span-12 .span-2 {
    width: 33.33% !important;
    float: left !important;
}
}

Thank you so much for the response @tuanphan  unfortunately the code hasn't made a difference, using Brine 7.0 

I have other coding, and wonder if this is affecting it

#logo .logo.image img {
   width: 600px;
  max-width: 1000px;}

.ProductList-filter-list-item:first-child {
    display: none !important;
}
.variant-option * {
   font-family: "Proxima Nova", proxima-nova !important;
}
.form-wrapper .field-list .date .field { position: relative }
.month { left: 5em; margin-left: 0 !important }
.day { left: -3em; margin-left: 0 !important }
.year { left: 2.5em; margin-left: 0 !important }

.markdown-block p {
  margin-left: 1em; 
}

.markdown-block .ui-closed:before {
  font-family: monospace;
  content: "+ ";
  color: #000000; 
}

.markdown-block .ui-open:before {
  font-family: monospace;
  content: "- ";
  color: #000000; 
}
.markdown-block {
    order: 5;
}
#new-page-1 {
background: #f7f7f7
}

//remove hyphens//
p, h1, h2, h3 {
  -webkit-hyphens: manual !important;
  -moz-hyphens: manual !important;
  -ms-hyphens: manual !important;
  hyphens: manual !important;
}

.products .grid-item .sqs-add-to-cart-button {
text-align: center;
padding: 10px 20px;
}

/* 3 columns mobile */
@media screen and (max-width:640px) {
div#page-5fb8554758f7584e710bd7be .span-12 .span-2 {
    width: 33.3 !important;
    float: left !important;
}
}

.product-block .sqs-add-to-cart-button {
  padding: 0em 1em!important;
}

Sorry, yes I changed the break point to 640px @tuanphan

Amazing @tuanphan Amazing it works!! Thank you so so much! really appreciate it

@tuanphan Is this any way to get this working for 2 columns? I've got a stack of 9 code blocks in a 3x3 grid, but for mobile this grid is to small. If I change the width to 50%, it's almost perfect in 2 columns, but then there are 3 at the end that are stacked on one side. Like this

1 2

3 4

5 6

7

8

9

and I want it to look like:

1 2

3 4

5 6

7 8

9

website: https://flamingo-fish-258z.squarespace.com/

pass: iconic

Is there any way to get this working with 2 columns? Thank you in advance!

On 1/21/2021 at 3:44 PM, MattIconic said:

@tuanphan Is this any way to get this working for 2 columns? I've got a stack of 9 code blocks in a 3x3 grid, but for mobile this grid is to small. If I change the width to 50%, it's almost perfect in 2 columns, but then there are 3 at the end that are stacked on one side. Like this

1 2

3 4

5 6

7

8

9

 

and I want it to look like:

1 2

3 4

5 6

7 8

9

 

website: https://flamingo-fish-258z.squarespace.com/

pass: iconic

Is there any way to get this working with 2 columns? Thank you in advance!

Hi. Which columns?

On 1/23/2021 at 3:49 PM, tuanphan said:

Hi. Which columns?

Hi!

On the home page, where the team photos are. I think this is the correct page section:

page-section-5fb3c8668ae3d9089a285b49

Thanks again!

On 1/26/2021 at 4:02 AM, MattIconic said:

Hi!

On the home page, where the team photos are. I think this is the correct page section:

page-section-5fb3c8668ae3d9089a285b49

Thanks again!

Add to Design > Custom CSS

@media screen and (max-width:767px) {
body.homepage .gallery-grid-wrapper {
    grid-template-columns: repeat(3,1fr) !important;
}
} 

On 11/23/2020 at 2:20 PM, tuanphan said:

/* 3 columns mobile */ @media screen and (max-width:640px) { div#page-5fb8554758f7584e710bd7be>.row:first-child .span-4 { width: 33.33% !important; float: left !important; } }

Hey Tuanphan,

My site got the same issue and I've try to use this code however it doesn't work on my page. 

I want my product page to be in 2 columns on mobile view, can you help me with this?

The page I want to change is: https://morpheus.squarespace.com/shop

Thank you!

On 2/3/2021 at 6:11 PM, Lace said:

Hey Tuanphan,

My site got the same issue and I've try to use this code however it doesn't work on my page. 

I want my product page to be in 2 columns on mobile view, can you help me with this?

The page I want to change is: https://morpheus.squarespace.com/shop

 

Thank you!

Add to Design > Custom CSS

/* Product 2 columns mobile */
@media screen and (max-width:767px) {
	.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

4 minutes ago, tuanphan said:

Add to Design > Custom CSS

/* Product 2 columns mobile */
@media screen and (max-width:767px) {
	.products.collection-content-wrapper .list-grid {
    display: grid;
    grid-template-columns: repeat(2,minmax(0,1fr));
    grid-column-gap: 10px;
}
}

 

Thank you Tuanphan, it works magically! 

Although I still got a problem, which is a white line appears on top of the first row products. Have no idea how to get rid of it, it only appears on mobile view 😞

Can you help? Thank you! 

page: https://morpheus.squarespace.com/shop

19 hours ago, Lace said:

Thank you Tuanphan, it works magically! 

Although I still got a problem, which is a white line appears on top of the first row products. Have no idea how to get rid of it, it only appears on mobile view 😞

Can you help? Thank you! 

page: https://morpheus.squarespace.com/shop

It looks like you solved this?

On 2/5/2021 at 9:33 AM, tuanphan said:

It looks like you solved this?

Yes I have sorted this thank you! 

However still on my landing page, I have a Best sellers section and in mobile view they stacked, is there any code I can use to let my landing page's product view on mobile to be in 2 column? 

Thank you: https://morpheus.squarespace.com/ 

20 hours ago, Lace said:

 

 

Yes I have sorted this thank you! 

However still on my landing page, I have a Best sellers section and in mobile view they stacked, is there any code I can use to let my landing page's product view on mobile to be in 2 column? 

Thank you: https://morpheus.squarespace.com/ 

Add to Design > Custom CSS

/* Best sellers mobile */
@media screen and (max-width:767px) {
div#page-section-5fdc9ce76ba1be148e86d3d8 .span-4 {
    width: 50% !important;
    float: left !important;
}
}

8 hours ago, tuanphan said:

* Best sellers mobile */ @media screen and (max-width:767px) { div#page-section-5fdc9ce76ba1be148e86d3d8 .span-4 { width: 50% !important; float: left !important; } }

Hi tuanphan!

I was able to apply the code to my 3 icons at https://www.pedrofarms.com but can you help me fix the font size? Kindly check the screenshot. 

Thank you so much in advance!!!

23 hours ago, tuanphan said:

/* Best sellers mobile */ @media screen and (max-width:767px) { div#page-section-5fdc9ce76ba1be148e86d3d8 .span-4 { width: 50% !important; float: left !important; } }

Sorry it didn't seem to work when I add one more product on the best seller section. 

Can you have a look for me? Thanks 

My website:https://morpheus.squarespace.com/

On 2/10/2021 at 3:27 AM, Artjective said:

Hi tuanphan!

I was able to apply the code to my 3 icons at https://www.pedrofarms.com but can you help me fix the font size? Kindly check the screenshot. 

Thank you so much in advance!!!

 

Add to Design > Custom CSS

/* order font size mobile */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1612529510512_12593+.row h3 {
    font-size: 22px;
}
}

On 2/10/2021 at 7:30 PM, Lace said:

Sorry it didn't seem to work when I add one more product on the best seller section. 

Can you have a look for me? Thanks 

My website:https://morpheus.squarespace.com/

Add to Design > Custom CSS

/* Best sellers 3 columns mobile */
@media screen and (max-width:767px) {
div#page-section-5fdc9ce76ba1be148e86d3d8 .span-9 .span-3 {
    width: 33.33% !important;
    float: left !important;
}
}

Hi tuanphan,

Sadly the code you gave me didn't work out as I expected. I wanted the Best Seller Section to have 2 Products Side by side, 2 Columns and 2 Rows as there are 4 products there in total.

Can you help me to have a look and give me another custom CSS code? 

Thanks a lot,

My website:https://morpheus.squarespace.com/ 

I tried the codes listed above but it did not work for my 7.1 site. I have a shop by category and best sellers section and I'd like them to be side by side on mobile (horizontal and not vertical). There are 4 rows for both. Can someone help me with a CSS code? 

My website: https://emthaw.com

On 2/15/2021 at 3:55 AM, Lace said:

Hi tuanphan,

Sadly the code you gave me didn't work out as I expected. I wanted the Best Seller Section to have 2 Products Side by side, 2 Columns and 2 Rows as there are 4 products there in total.

Can you help me to have a look and give me another custom CSS code? 

Thanks a lot,

My website:https://morpheus.squarespace.com/ 

Your layout, can't change to 2 items/row on mobile. Need to edit some things on your layout, then able to use code.

If you can add me as a contributor, I can take a look

On 2/16/2021 at 7:18 AM, EmilyT1 said:

I tried the codes listed above but it did not work for my 7.1 site. I have a shop by category and best sellers section and I'd like them to be side by side on mobile (horizontal and not vertical). There are 4 rows for both. Can someone help me with a CSS code? 

My website: https://emthaw.com

Add to Design > Custom CSS

/* Mobile 2 columns */
@media screen and (max-width:767px) {
div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3 {
    width: 50% !important;
    float: left !important;
}
div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3:nth-child(2n+1) {
    clear: left !important;
}
div#block-yui_3_17_2_1_1604951950007_46430+.row>.span-3 * {font-size: 20px !important;}
}

1 hour ago, tuanphan said:

Your layout, can't change to 2 items/row on mobile. Need to edit some things on your layout, then able to use code.

If you can add me as a contributor, I can take a look

Hi, thanks a lot, 

I'll drop you a private message regarding this.