Responsive Format

[dmcmullen]

Is there an easy way to turn off the responsive stylesheet (mobile styles)?

I personally love the way these newer themes break down for mobile devices, but my client is more interested in having his entire site display on mobile (just smaller so people can pinch to zoom into the site the way it looks on desktop version).

I’m also trying to add another line of navigation below the Primary Navigation and this doesn’t work well in the responsive mode – just becomes a bungled mess of links in the header section.

Let me know and thanks!

[livemesh]

If you need help on turning off responsive function, you can have a look at the suggestion posted here. Although it is for my earlier theme, the same code changes apply in the case of Extinct too –

https://www.livemeshthemes.com/support/forums/topic/way-for-user-to-switch-between-responsive-and-normal-layout/

You may still need to manually adjust a few things to perfect it since theme was not built with non-responsive layout in mind.

For the menu, if you can leave a private message here with the URL, I can take a look. Will help if you specify how you would like it function/look.

[dmcmullen]

This reply has been marked as private.

[livemesh]

It is possible to achieve this through child theme. You can ask the theme to not load the responsive.css by making modifications to functions.php of the child theme by including the following code –

add_action('wp_enqueue_scripts', 'mo_enqueue_styles', 100);

function mo_enqueue_styles() {
wp_deregister_style('style-responsive');
}

You will need to do the following modifications to style.css of the child theme (not the parent) to copy over couple of lines from responsive.css file of the parent theme –

/* Responsive css */
#container { min-width: 1180px; }

.inner, body.fluid-width-page #breadcrumbs, body.fluid-width-page .segment-content {
    padding-left: 20px; padding-right: 20px; max-width: 1140px; margin: 0 auto; }

body.fluid-width-page #main .inner, #custom-title-area .wide { max-width: none; padding: 0 !important; margin: 0; }
body.fluid-width-page #content, body.fluid-width-page .entry-content { padding: 0; margin: 0; }
body.fluid-width-page #breadcrumbs { display: none; }

When you make these changes, for most cases, things look good with responsive function disabled. There are just a few lines of media queries related to home page in style.css for responsive function (for client list, e.g.) which you may need to override in the child style.css file.

[metalpotatouk]

Hi there,

I have done this for my theme, and I have two questions:

1. Can responsive been turned off JUST for mobile devices?

2. Using the code provided above, all responsive has been disabled, as is described. However if you navigate to the website on an iPhone for example, initially its zoomed right in to the logo area. You have to pinch to zoom out. Can this not be defaulted to zoomed all the way out, like other sites work?

Thanks a lot.
Conor

[livemesh]

1) I did not get the first question – I thought responsive function disabling is targeted towards the mobile devices only. Pls clarify.

2) For zooming out, can you try removing this line from the header.php line number 18 (or tweak it a bit to see how the browser behaves) and retry? –

If that does not help, can you pls post a private message here with the URL so that I can have a look at the site. It will help a lot if you post a temp login as well so that I can make changes and test it. Thanks!

[metalpotatouk]

Hi, thanks for the reply.

1. By using the code above, it seems to disable responsive for everything. For example, if I resize the browser on my mac, the website doesn’t respond accordingly. I guess, I still want to have a responsive site, but I don’t want a couple of the smaller break points targeted at mobile and tablet sized screens.

2. That fixed this. Thanks.

The URL of the site is http://bit.ly/188rveZ

[dmcmullen]

This reply has been marked as private.

[metalpotatouk]

By the way, I don’t know if that private comment was in reply to me ‘dmcmullen’, or how I can see it?

[dmcmullen]

No – sorry – was a private message to the developer about my personal site – sorry!

[metalpotatouk]

Ah my apologies. I thought you might have been with the developers. 😀 Good luck in getting your problem fixed. 🙂

[livemesh]

Sorry folks – went through a major update for one of my previous themes with WooCommerce integration and this took a while. Now for the queries –

metalpotatouk – I do not think it makes sense to have responsive function for desktop only and not for tablets/smartphones. The theme should look fine with or without responsive function disabled from 1280px and above resolutions. And there are only “handful” of desktops out there with resolution below that. And those with very low resolution monitors can always scroll just a bit if required to view all content. I personally see no benefit in providing responsive function to desktop users and I do not know of a way to enable it only for desktops without using some type of hack JS code which checks for mobile devices like iPhone/iPad and disables responsive function.

Second – I am unable to access dmcmullen site – it’s looking for a password. Can you pls post the login in a private message so that I can take a look at the site in my iPhone/iPad and see what’s happening? Thanks.

[livemesh]

dmcmullen – I tested a site with iPhone and iPad as well with the meta tag removed from header.php and did not encounter the 90% width issue you are mentioning.

But you did encounter it, you can change the value of initial-scale to 0.8 or so value to fix the issue. You can constrain how much the user can zoom in or out by setting the maximum-scale and minimum-scale properties. You can change the value of maximum-scale to say 2 and immediately notice that the user can now zoom in much more than what is possible if you set the value equal to 1 as set by the theme.

Likewise, you can change the value of initial-scale to something like 0.5 and make the webpage stay centered in the middle occupying only half of the available screen width.

Avoid using device-width value and leave the browser to decide on the width automatically based on the content width. Hope this helps.

[dmcmullen]

I’m not getting good results. I’ve tried multiple variations of the “viewport” meta name. Some with device-width and some without but still having issues.

<meta name=”viewport” content=”width=device-width, initial-scale=.65, maximum-scale=1″>

This actually fixes it on the iPad 2 so that it looks great both in portrait and landscape.

Unfortunately it still won’t scale down for the iPhone 5 running iOS7.

And I’m worried that on things like the iPad 4 with retina display that it might look really small rather than filling the width of the viewport.

Is there no way to set it to be 100% width on any given device as the starting point?

The client is pretty picky about this so I may have to find a different theme! Which would stink given the hours I’ve put into it.

Any last minute thoughts?

[livemesh]

Well I have invested enough hours on this and I getting a feel that this is going nowhere. Yesterday I spent 2 hours investigating this and testing it on my iPad/iPhone and today I am hearing you talk about iPad 2, iPad 4, iPhone 5, 2 day old iOS 7 and do not what will be next.

Sorry, we said at that start that this theme is designed to be responsive and we cannot guarantee anything if you want to customise it to be non-responsive. And I am getting a feeling that this client is just nitpicking and there is no theme out there which will meet their needs. First, it is hard to find a good theme which is non-responsive these days – every theme I know is responsive. Next, there is no guarantee that this theme will work right in all the various devices and iOS versions you talk about. If they have the time to perfect it for all devices, I think they have some technology which is not of much use these days. I am not trying to be rude here, but for the first time I am feeling really sorry that I spent so much time on a support thread.

[Author]

Posts