Turn off Responsible/Mobile Feature

[EmpoweredIdeas]

Is there a way to “turn off” responsiveness of the site? We’re having serious issues between KLEO and the AJAX-Calendar Plugin (see: http://www.justridenc.com/events/ on an iPhone).

At this point, we’d rather have a non-responsive site that will properly display our calendar, since it’s the main “focus” of ths website.

Thanks in advance. 😀

[Abe]

Hi, We did some test and try adding this CSS in your child theme/style.css or in WP admin -Theme options – Quick css:

COPY CODE

.kleo-navbar-fixed .page-boxed .kleo-main-header, .container, .kleo-page {
    width: 1200px;
}
body, html {
    overflow-x: inherit;
}

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[gsxawd99]

i tried your advice above and it doesn’t work for me at all, i also really need mobile turned off as the most important part of my site does not work in the responsive mobile version, id rather have users pinch and zoom my whole site to be sure they’re getting the necessary info….please help! where are all the mobile css coding, can i just delete it??

[gsxawd99]

in fact it screws up the entire website when that code is added and doesn’t do anything to the mobile version..

[Abe]

I am doing some tests and come with a solution.

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Abe]

This css should make a fix width for the site:

COPY CODE

.kleo-navbar-fixed .kleo-main-header, .kleo-navbar-fixed .page-boxed .kleo-main-header, .container, .kleo-page {
    width: 970px;
}
body, html {
    overflow: inherit;
}

Also you can remove this line from header.php

COPY CODE

<meta name="viewport" content="width=device-width, initial-scale=1.0">

And you can also remove all media queries from assets/css/app.css from the end of the file
Also assets/css/bootstrap.min.css has media queries and you can try replacing the contents with one from https://github.com/bassjobsen/non-responsive-tb3/blob/master/bootstrap.min.css

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[gsxawd99]

what am i missing? I’ve replaced with the non responsive bootstrap css (i put files in my child theme in the same path, assets/css/ as well as removed all media queries from the app.css file, added that css code from above to my childs style.css file and removed the viewport line from the header.php file…and the attached pic is what the page look like now? and it still shows the mobile navigation on mobile as well as other mobile aspects?

Attachments:

You must be logged in to view attached files.

[Abe]

We will do some more tests and also look on your site

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[SQadmin]

Hi, the best way is to make custom plugins compatible and responsByive. Overrides to ensure desktop styles display are not as performant or sleek as one would like.

Regards,
Robert

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

[pittsleyb]

I too, commented out viewport which makes the site appear as the desktop version using pinch and zoom. Is there a way to disable the mobile menu (line and dropdown) since it is very hard to use on mobile since you have to click the little + symbols. I’d rather just have the desktop version of the menu items. Is this possible?

http://www.worldwidesurvival.com

[Abe]

For that you will have to remove the media queries from apps.min.css which is not such an easy task. You can edit the app.css and minify the contents in app.min.css

Hi there!!! Help others from the community and mark any reply as solution if it solved your question. Mark as a solution

---
@ SeventhQueen we do our best to have super happy customers. Thanks for being our customer.

[Author]

Posts