How to disable mobile site

How exactly do you see that working? If I look at your site from my iPhone, what do you expect to happen?

Hi,
like @rdellconsulting : I am really curious why we would do so?

Anyway, you need to delete the @media queries from the css stylesheets…
Cheers

The reason is that it doesn’t display properly. There seem to be a few bugs related to the custom CSS changes I made to the desktop site. Until I can fix them, I just want the desktop site to show up on mobile devices.

Thanks nikeo.

@jefferds44,

How is it not displaying properly? Do you have a link to your site?

I have a client who only wanted a static site but since I was already familiar with Customizr after doing a previous site and really liked it, I decided to keep it for this static site. After a little research, help from other forum members, and pulling some hair out I was able to make my site static. You can see it here.

Basically, you just have to add a px width to the header, footer, main-content, and slider. In my site I set them to width: 1024px;. The only thing that is responsive by design is the bar I added below the slider.

It’s working just as I want it to, except that I can’t figure out how to keep the non-responsive (desktop) version of the main menu when I scale the browser down. I’ve been working for weeks now to figure out what part of the code triggers the responsive menu but no one seems to have an answer.

Thanx

@seahawksean, 980px width seems to be the breakpoint. See my post.

Interestingly, I have a @media at 980px from the past but can’t find what device that refers to, so let me know if you do so I can finish off my sample style.css.

I think the code you’re looking for is in class-header-menu.php #94-96. You need to remove the div with class=”nav-collapse collapse”

@rdellconsulting: The basic Bootstrap breakpoints are:

@media (min-width: 1200px) {...}
@media (min-width: 768px) and (max-width: 979px) {...}
@media (max-width: 767px) {...}
@media (max-width: 480px) {...}
@media (max-width: 979px) {...}
@media (min-width: 980px) {...}

and Nikeo has added these:

@media (max-width: 1200px) {...}
@media (max-width: 320px) {...}

(max-width: 979px) is where the responsiveness kicks in.

This width doesn’t seem to correspond to any device of note, but seems to be an arbitrary point between a 20″ and 22″ desktop, 14 pixels above a Google Nexus 7. Bootstrap 2.3.2 considers “980px and up” to be the “default” before getting to a “Large display” at 1200px and up.

@seahawksean I feel your pain ?? But everything I try for you doesn’t work (and you’re much more highly skilled than I am, so I know you’ve tried everything I have).

I must remember always read Nikeo’s posts carefully.

He said:

Anyway, you need to delete the @media queries from the css stylesheets…

In fact, this works. Delete every single one of the @media (...) {...} media queries and the menu stays.

However, don’t throw them away because you will want to selectively then put some of them back again. For example, the main container needs handling at smaller screen sizes, as it overflows. So do the text sizes in the header, or all the elements overwrite each other.

I think it would be easier to change clients!

p.s. If you’re making changes to the <colour>.css file (which you will need to do in your case), one trick I’ve learned is to edit a different colour.css file and upload it in ftp. You can then go into Customiz’it and take a look at the changes simply by changing the skin colour. Allowing you effectively to have a “preview” of your changes.

Of course that would work but I found it easier to just override the media queries in my child css as apposed to having to scan thru all that code in the parent’s css and remove all the queries. And of course once another update comes out you’d then have to go back and delete all queries again.

And you are right @electricfeet about needing to adjust the width and most likely, left margins of .row and .container. It takes a little time and trial and error to get everything laid out properly and static.

And thank you @rdellconsulting for replying to my menu issue.

Not 100% sure of you question, but the breaking point is 979px, whereas the mobile menu kicks in. If I remember correctly 980px is the width of non-iPad tablets in portrait mode.

In regards to removing the code, I did remove class="nav-collapse collapse"(the 2nd one) from class-header-menu.php but it has no affect. The mobile menu still appears.

And just to point out, I’m still using ver3.0.9 for this site as I’m leery of updating the theme because this site is perfect just the way it is (except for the menu issue) and I don’t want to screw it all up the update.

Let me know if this answers your question or not.

Oh and @electricfeet, I would certainly not say I’m more skilled than you. Not sure any of us ever master PHP. LOL. But thank you for looking into my menu issue and at least confirming it’s not something I’m missing.

I even sent a personal email to Nikeo in hopes that he would know the answer and reply but have yet to hear back from him. Maybe he’ll do so in the next few days as it’s almost time to send this site live.

Thanx again.

@seahawksean,

Hi!

Firstly, I really like what you have done with your website. I’ve been trying to achieve something similar, but with no luck. How can I override the @media query?

I’d like to lose the responsiveness as it doesn’t work out the way I’d like. I am using child-theme and making my modifications in there (e.g. style.css).

I love the Customizer theme, simple to edit and the look is just beautiful. Wish that Nikeo would add a button or something to toggle responsiveness on and off. ??

Many thanks,
Mario

@mariole91: The situation that Seahawksean is in is unique. After designing the site, his clients asked him to turn the responsiveness off. So he’s facing a choice of a considerable rebuild or removing the responsiveness.

But removing the responsiveness is very difficult. Responsiveness is built into the theme from the ground up: it’s based on bootstrap whose whole core is about responsiveness.

I for one, would not like a button to switch it off. I’d rather Nikeo spent his time designing new responsive themes than dismantling the responsiveness.

If you really don’t want the responsiveness and you’re just starting to build your site, I’d recommend finding a non-responsive theme — though I understand that’s a hard choice, as Customizr really is a wonderful theme.

@electricfeet

Thanks for the fast reply! ??

Since I don’t know much about PHP and do correct me if I’m wrong, but cannot this be done by a simple if-clause (e.g. if responsiveness is toggled off ignore @media queries, else use @media or something like that)?

What changes do I need to make in code to get a similar result as Seahawksean has? Can this be done by using style.css for the child theme? Those @media queries, those are the ones in the xcolor.css right?

Sadly, I have invested quite a lot of time in customizing my site and starting all over again… well I’d be really grateful if someone could help me.

Thanks,
Mario

@mariole91,

I used my child theme css to override the media queries which are found in color.css. Just add the ones ElectricFeet posted above to the bottom of your child css. If you use Firebug to inspect the elements in my site you will see which ones I added width: 1024px to (header, footer, main content, slider, container, etc) to both the main part of my css and the media queries.

Just so you know my site is still ver3.0.9, so if you’ve updated to 3.0.12 be sure to use the corresponding elements in that version. Although I don’t think the names of the elements changed.

Another key is to make sure that in your php files that are used that you replace class="row fluid" with just class="row". You’ll have to play around with the css a bit to add and remove margins to some of the elements to get them to line up the way you want.

Let me know how it turns out.

Hello,

I don’t know if it’s the right place to post my question but here’s my problem:
I have the Optimizepress Theme installed and it’s responsive. But for some weird reason it doesn’t display well on some devices (mobiles, tablets or some browsers). It sometimes appears “empty”, as if there’s no content on my pages. And I can’t seem to figure out why? Can someone help me on that issue, please?

Thank for your help.

Lisa