Jump to content

How to disable responsive mobile design on single page

Go to solution Solved by tuanphan,

Recommended Posts

Hi there, 

I am trying to disable the responsive mobile design of a specific page on my website. I have tried several custom css codes but nothing seems to work. I just want the icons you see here to stay the way they look when you visit the page using a phone or a smaller screen. I want the layout of the images to stay the same regardless of the screen size. 

Could anyone help me?

Thank you so much!

Link to comment
  • Replies 12
  • Created
  • Last Reply

Top Posters In This Topic

If you know basic CSS, you can set width for all .col class (I solved similar question a few days ago)

(add !important to after, eg: width: 20% !important;)

If you don't know, please let me know, I will take a look

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 weeks later...
7 hours ago, Daguerrotipo said:

Hi @tuanphan, I was wondering if you could help me with this. Thank you.

Add to Home > Design > Custom CSS

div#page-5ea609deb96d8067d451eb1f>.row:nth-child(2)>.span-6 .span-2 {
    width: 33.33% !important;
    float: left !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
  • 2 weeks later...

Hi @tuanphan I was wondering if you could give me a hand with this. Now the last two icons look smaller than the rest of icons in a big screen. Also, I would like the icons to be smaller and positioned on the left so we can still see the foot of the background image. I have tried different codes but I can't figure it out. 

I would appreciate your help. Thank you!!

Link to comment

Hi. Sorry for the delay. Overloading.

Edit above code to this

@media screen and (max-width:767px) {
div#page-5ea609deb96d8067d451eb1f>.row:nth-child(2)>.span-6 .span-2 {
    width: 33.33% !important;
    float: left !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
21 hours ago, Daguerrotipo said:

Thank you @tuanphan! That's amazing! When I shrink the browser there's a point where the icons look like this though. How could I fix it? 

Thank you!!

I don't understand. Can you clarify this?

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
  • Solution
8 hours ago, Daguerrotipo said:

Apologies, @tuanphan. Yes, here's a screenshot of the issue I'm encountering. As you can see, two of the icons look smaller than the rest at a certain screen size. Thank you for your help as always.

Screen Shot 2020-06-22 at 11.08.33 AM.png

Which screensize, try this

@media screen and (min-width:641px) and (max-width:771px) {
div#page-5ea609deb96d8067d451eb1f>.row:nth-child(2)>.span-6 .span-4 .span-2 {
    width: 50% !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
  • 3 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.