Jump to content

3 Column Mobile View

Recommended Posts

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? 

Screen Shot 2020-12-05 at 11.47.35 AM.png

Screen Shot 2020-12-05 at 11.47.41 AM.png

Screen Shot 2020-12-05 at 11.47.12 AM.png

Link to comment

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;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
4 hours ago, Anthonylozada said:

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

Screen Shot 2020-12-14 at 11.49.35 PM.png

Add to Home > Design > Custom CSS

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

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

image.thumb.png.94a5675f8158c0919a4e51f4013e27ad.png

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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;
}
}

image.thumb.png.94a5675f8158c0919a4e51f4013e27ad.png

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

Screen Shot 2020-12-19 at 11.11.48 AM.png

Link to comment
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

Screen Shot 2020-12-19 at 11.11.48 AM.png

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

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;
}
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
  • 2 months later...
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!

Link to comment
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%;
}

 

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment
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

Screen Shot 2021-03-03 at 7.42.28 PM.png

Screen Shot 2021-03-03 at 7.42.21 PM.png

Link to comment
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

Screen Shot 2021-03-03 at 7.42.28 PM.png

Screen Shot 2021-03-03 at 7.42.21 PM.png

Hi. Can you share link to page in screenshot?

Email me if you have need any help (free, of course.). Answer within 24 hours. 
Or send to forum message

How to: Setup Password & Share url - Insert Custom CSS - Page Header - Upload Custom Font - Upload File - Find Block ID - Contact Customer Care

Link to comment

Create an account or sign in to comment

You need to be a member in order to leave a comment

√ó
√ó
  • Create New...

Squarespace Webinars

Free online sessions where you’ll learn the basics and refine your Squarespace skills.

Hire a Designer

Stand out online with the help of an experienced designer or developer.