Jump to content
Search In
  • More options...
Find results that contain...
Find results in...
Advanced Search

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

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

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

Create an account or sign in to comment

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

×
×
  • Create New...