3 Column Mobile View

Hello! On my website, I have a photography section, and I have the images in 3 column view, but whenever I look at the page on mobile, it makes it a 2 column view. How can I make it a 3 column view on mobile? 

Thanks!

Same question for Squarespace 7.1!
Anyone who know what to do? 🙂

Can you share site url? We can check easier

Thanks! I already solved the problem by using one picture (showing my 6 icons) instead of 6 singe ones.

7 hours ago, tuanphan said:

Can you share site url? We can check easier

The website isn't live yet, so hopefully this will work. 

8 hours ago, tuanphan said:

Can you share site url? We can check easier

I don't think i can share the site url since it isn't live but I've attached a few images. The first two is the difference between the desktop and mobile views.

The third image is a new issue i have, I want the item description and check out area to match size proportionately with the item size, i haven't been able to do that. Also, I can't seem to get rid of that empty space above the item. How can i remove all of that empty space? 

You can setup password & share url

14 hours ago, tuanphan said:

You can setup password & share url

https://rhino-gar-3ghz.squarespace.com/film/p1 

First link in mobile view only shows 2 column view when it's 3 on desktop

Password - red

And here's the link to an item listing. All of them have that empty space on the top in the desktop view https://rhino-gar-3ghz.squarespace.com/shop/p/alocasia-yyche-2ctba

Add to Home > Design > Custom CSS

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

Thank you so so so much!!!!!

On 12/6/2020 at 3:36 AM, tuanphan said:

You can setup password & share url

I still need some additional assistance in regard to the empty space when I'm in the shop, there's such a huge empty gap. How can I remove that empty space?

Which space?

14 minutes ago, tuanphan said:

Which space?

I edited the picture so you could see. I'd like for it to be much closer. 

4 hours ago, Anthonylozada said:

I edited the picture so you could see. I'd like for it to be much closer. 

Add to Home > Design > Custom CSS

/* space between product - header */
section.products.collection-content-wrapper.product-layout-side-by-side {
    padding-top: 5px;
}

7 hours ago, tuanphan said:

Add to Home > Design > Custom CSS

/* space between product - header */
section.products.collection-content-wrapper.product-layout-side-by-side {
    padding-top: 5px;
}

 

Thank you! You're amazing

On 12/15/2020 at 11:57 PM, Anthonylozada said:

Thank you! You're amazing

On tablet, shop is 1 item/row. Do you want to change to 2 items/row?

You can add this to Home > Design > Custom CSS

/* grid tablet 2 items */
@media screen and (max-width:991px) and (min-width:768px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(2,1fr) !important;
}
}

On 12/17/2020 at 9:53 AM, tuanphan said:

On tablet, shop is 1 item/row. Do you want to change to 2 items/row?

You can add this to Home > Design > Custom CSS

/* grid tablet 2 items */
@media screen and (max-width:991px) and (min-width:768px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(2,1fr) !important;
}
}

Wow, you absolutely read my mind! I was going to ask you about this. That screenshot is of the photography section. In the Shop, It's only 1 item/1row, I'd like to change that to make it 2 rows. I put in the CSS and it didn't change it. I appreciate your help so much

On 12/19/2020 at 11:12 PM, Anthonylozada said:

Wow, you absolutely read my mind! I was going to ask you about this. That screenshot is of the photography section. In the Shop, It's only 1 item/1row, I'd like to change that to make it 2 rows. I put in the CSS and it didn't change it. I appreciate your help so much

above code for Tablet, not mobile.

Use this new code

/* grid tablet 2 items */
@media screen and (max-width:991px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(2,1fr) !important;
}
}

34 minutes ago, tuanphan said:

above code for Tablet, not mobile.

Use this new code

/* grid tablet 2 items */
@media screen and (max-width:991px) {
.gallery-grid-wrapper {
    grid-template-columns: repeat(2,1fr) !important;
}
}

 

Doesn't appear to be working 

New code

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

1 hour ago, tuanphan said:

New code

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

 

You're a genius! Thank you so so much!!!

On 12/21/2020 at 9:21 PM, tuanphan said:

New code

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

 

Hello, I need your wonderful help again! 

I want my footer to line up with my site header. I tried achieving that using spacers, but it wouldn't work. How can i go about doing that?

Thanks!

On 3/1/2021 at 11:01 AM, Anthonylozada said:

Hello, I need your wonderful help again! 

I want my footer to line up with my site header. I tried achieving that using spacers, but it wouldn't work. How can i go about doing that?

Thanks!

Add to Design > Custom CSS

/* Align header - footer */
footer.sections section .content-wrapper {
    max-width: 100%;
}

15 hours ago, tuanphan said:

Add to Design > Custom CSS

/* Align header - footer */
footer.sections section .content-wrapper {
    max-width: 100%;
}

 

Thank you so so much!!!!! You're amazing!

One more thing, please. The two images I've posted show the issue I'm having, I illustrated wanting to be able to adjust the size of that section. I want it to be closer to "the house of medici" but I can't adjust how far it is from that section

On 3/4/2021 at 7:46 AM, Anthonylozada said:

Thank you so so much!!!!! You're amazing!

 

One more thing, please. The two images I've posted show the issue I'm having, I illustrated wanting to be able to adjust the size of that section. I want it to be closer to "the house of medici" but I can't adjust how far it is from that section

Hi. Can you share link to page in screenshot?