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

How to disable responsive mobile design on single page

Question

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!

Share this post


Link to post

12 answers to this question

Recommended Posts

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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

Hi Tuanphan! Thank you so much for your answer! Unfortunately, my knowledge of CSS is limited, and what I tried didn't work. Could you explain what you say further? I would really appreciate it. Thank you so much.

Share this post


Link to post
  • 0
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;
}

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

@tuanphan thank you so much! For some reason, now the last two icons look smaller than the rest in a big screen. I tried to fix it but it didn't work. What could be the issue?

Thanks again!

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

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

 


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0
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?


You can send your question to my email to get faster answer. / How to Setup Password & Share URL 

-- I'm Tuan. I work for a non-profit project (promote the establishment of free libraries). I check the forum once or twice a day to help out the community. If you don't see me answering your question, you can send it to the email above. There are so many questions every day so I can't answer them all at once, I will try to answer them in the next few days.

Share this post


Link to post
  • 0

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

Share this post


Link to post
  • 0

Thank you so much @tuanphan For some reason when now I move that page to an Index, the background image disappears. See attached. Do you know why that is? How could I fix it? Thanks! 

Screen Shot 2020-07-11 at 9.30.09 PM.png

Share this post


Link to post

Create an account or sign in to comment

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


×
×
  • Create New...