Jump to content

Need to turn off Mobile View on this page

Recommended Posts

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 😘😊

Link to comment

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

 

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
  • 10 months later...
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;
}
}

 

 

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

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 months later...

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

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

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
  • 1 month later...
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;
}
}

 

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, 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

 

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

 

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 months later...
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  ⬇️

Improve your online store with our extensions.
About: Squarespace Circle Leader since 2017. I value honesty, transparency, appreciation and great design ♥.
Work: Squarespace Developer and founder of SF Digital, building the features Squarespace didn't include™.
Content: Links in my posts may refer to SF Digital products or may be affiliate links.

Buy me a coffee

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

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 weeks later...

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.