Need to turn off Mobile View on this page

Site URL: https://www.ocpmask.com/kid

site: https://www.ocpmask.com/kid

I need help in turning off Mobile View on this page when customers are visiting from their smartphone (Which is 90% of my traffic).  I have a lot of products to sell as you can see there. When on mobile view, it shows 1 product at a time and the customers would have to scroll, making it very slow and unfriendly. 

I want the customers to be able to see an overview off all my products, then pinch-to-zoom or click on whatever they like.

I tried to follow the instructions from Squarespace but there is not option to turn off mobile view on my template.  I think it's not possible in 7.1 design.

@tuanphan Please Help! Cam on ban nhieu nhe 😘😊

Add to Home > Design > Custom CSS

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

This is EXACTLY  what i need! thank you so much for the help Tuan! you're amazing!

On 6/27/2020 at 10:11 PM, tuanphan said:

Add to Home > Design > Custom CSS

could someone help me make my mobile site look more like my desktop as well?

www.revcoffeecompany.com

On 6/27/2020 at 10:11 PM, tuanphan said:

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

 

On 5/17/2021 at 5:51 AM, AnthonySegura said:

could someone help me make my mobile site look more like my desktop as well?

 

www.revcoffeecompany.com

 

 

 

 

 

 

Each page needs a different code. Can you describe the desired layout on each page? We can check easier

Hi,

I also want to keep the vast majority of my site optimized for mobile but to have my photo blog pages appear the same as they do on the desktop. It might be nice to not have the sidebar cluttering up the side of the screen on mobile, but that's not as important as having the rest of the page look the same as it does on desktop. Right now, the arrangement of my photos/captions gets messed up because they all become stacked vertically. Ideally I'd look to be able to use this same code for future blog posts as well. Here is the page: https://www.skagitfilm.com/nicktphotos/photos2

Thank you very much for your help!

Nick

Hi Tuan, 

I am having the same troubles and was wondering if you might be able to help. We are looking to disable Mobile View on the page 'The Yum Yums'. Please see the link below: 

https://www.chonkyboiyumyums.com/new-index

Thank you so so much!

27 minutes ago, ChonkyBoi said:

Hi Tuan, 

I am having the same troubles and was wondering if you might be able to help. We are looking to disable Mobile View on the page 'The Yum Yums'. Please see the link below: 

 

https://www.chonkyboiyumyums.com/new-index

 

Thank you so so much!

 

For main content only or both main content, header, footer?

Hi Tuan,

I also need to change the mobile view on my page so it shows 3 images in a row rather than just 1, please could you try and figure this out, thank you!

(Or alternatively disable the mobile view on the main content)

www.tomschwimmbeck.com/work

5 hours ago, tomschwimmbeck said:

Hi Tuan,

I also need to change the mobile view on my page so it shows 3 images in a row rather than just 1, please could you try and figure this out, thank you!

(Or alternatively disable the mobile view on the main content)

www.tomschwimmbeck.com/work

I think 2 will be better

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="628d7c64e18b52733ac1d64c"] {
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5px 5px !important;
}
}

4 hours ago, tuanphan said:

I think 2 will be better

Add to Design > Custom CSS

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="628d7c64e18b52733ac1d64c"] {
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5px 5px !important;
}
}

Thank you so much! Is there anyway the buttons could also be made smaller as now they are the same size of the blocks, but I want them to be a bit smaller, thank you

19 hours ago, tomschwimmbeck said:

 

Use this new code

@media screen and (max-width:767px) {
.user-items-list-item-container[data-section-id="628d7c64e18b52733ac1d64c"] {
    grid-template-columns: repeat(3,1fr);
    grid-gap: 5px 5px !important;
}
.user-items-list-item-container[data-section-id="628d7c64e18b52733ac1d64c"] a.list-item-content__button {
    padding-left: 10px !important;
    padding-right: 10px !important;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
}
}

Perfect, thank you so much

Hi I have the same problem. Very happy with the desktop layout of my page but the mobile is terrible. I have tried to change this but have no luck. could you please provide me with a code that will allow the desktop and mobile versions of my website to look the same?

www.soundsaboutpod.com

42 minutes ago, SoundsAboutPod said:

Very happy with the desktop layout of my page but the mobile is terrible.

You do not need code. You are using Squarespace's latest editor known as Fluid Engine and when you've designed your desktop layout, you click the mobile preview button (top-right) and then move and resize the mobile layout to meet your needs. It is completely independent of the desktop layout. There's a support guide if you need further details.

Did this help? Please give feedback by clicking an icon below  ⬇️

is there a way i can just have both looking the same. i have tried editing the mobile version to look as palatable and similar to the desktop version of the site and it really isnt working

i tried resizing in mobile and it effected the desktop app. 

On 11/15/2022 at 5:19 AM, SoundsAboutPod said:

i tried resizing in mobile and it effected the desktop app. 

Can you take a quick video when you try resize it? We can check easier

I also want to turn off my mobile option!

https://themotherscircle.squarespace.com