Can mobile viewers switch from mobile view to full site view?

There was this post about switching off mobile:
https://www.ads-software.com/support/topic/how-to-disable-mobile-site

Not sure how you’d plan to have both available? May need some php (@acub’s the expert).

@rdellconsulting

Thanks for all of the code you’ve contributed to this theme. Amazing. Has been very helpful.

I am not wanting to disable mobile view, I want to give the viewer a choice of mobile or full site view when they land on my website, which is a real estate website. I’ve noticed most national real estate firms, including the new Berkshire Hathaway Real Estate Brokerage (Warren Buffett’s new firm) website has this option so I figured if it was good enough for Warren Buffett it might be something I should offer too.

I found a way to disable the responsive nature of a WP website (I haven’t tried it on this one because I want to keep the mobile view). I just thought if there was a way to have both I’d like to give viewers the options. If it can’t be done I’ll assuredly keep the responsive capabilities of the website intact.

Again, thanks again for all your contributions to this theme. They have been extremely helpful.

Put this in your child theme’s functions.php:

if (wp_is_mobile()) {
	add_action('__after_header', 'add_mfw_button');
	add_action('wp_enqueue_scripts', 'enq_bfw_button_script');
}
function enq_bfw_button_script() {
	wp_enqueue_script('mfwbutton', get_stylesheet_directory_uri().'/js/mfwbutton.js', array( 'jquery' ));
}

function add_mfw_button() {
	echo '<a href="#" onclick="return false;" class="mfw-button btn btn-primary">Full Width</a>';
}

Put this in your child theme’s style.css:

body.mobile-full-width { width: 1020px; }
a.mfw-button.btn {
	padding-top: 15px;
	box-shadow: -1px 1px 7px 0 rgba(0,0,0,.21);
	position: absolute;
	left: -35px;
	top: 70px;
	font-weight: bold;
	font-size: small;
	-webkit-transform: rotate(-90deg);
	-moz-transform: rotate(-90deg);
	-ms-transform: rotate(-90deg);
	-o-transform: rotate(-90deg);
	filter: progid:DXImageTransform.Microsoft.BasicImage(rotation=3);
}
a.mfw-button.btn:hover, a.mfw-button.btn:active {
	box-shadow: -3px 3px 7px 0 rgba(0,0,0,.35);
}

Create a js folder in your child theme and save the following code as mfwbutton.js inside it – path should be /wp-content/themes/{customizr-child}/js/mfwbutton.js (replace {customizr-child} with your child theme’s folder name):

jQuery(document).ready(function($){
	$('.mfw-button').click(function(){
		$(this).toggleClass('btn-primary');
		$('body').toggleClass('mobile-full-width');
	});
});

I’ve made a button that toggles width of body between screen resolution and 1020px when pressed. Styled it as a button, so it matches whatever skin/color you have chosen for the website. Also added a small lifting effect when active. If your website content looks best at a different width, change 1020px in the css above to whatever you want (should remain between 900 and 1200px though).

If you want to preview it, I’ve tested it on customizr.websiter.ro and I’ll leave it there for a while.

Note: the wp_is_mobile() check is disabled on the test site, so it can be seen from any device, not just mobiles.
Another note: If you don’t have a child theme, make sure you read how to properly create one either here, in the WP Codex, or on the theme’s website, in FAQ.

Actually, I did some reading on the subject… and the answer to your question is: no. At least not for the current version of Customizr.

Because the device screen width cannot be modified and media query rules apply based on that value.

The simplest method I can think of to disable responsiveness is to declare all media queries based on a class applied to the html. So by attaching/detaching the class from the html tag, the layout would become responsive or not.

For Customizr that would mean a complete rewrite of the CSS.

@acub

Thank you for for researching this. If you can’t do it I’m pretty sure it can’t be done.

Best pov I found on this subject: https://www.webmonkey.com/2013/01/turning-off-responsive-design/
Simplest solution: hooking a class to body, just as I thought it should be done.

I never said I can’t do it or that it can’t be done. I just assumed it’s a lot of work.

After sleeping over it, I realized that it’s quite a bit simpler than I initially thought it would: add short class to body (or html, for that matter) (let’s call it rsp). Now all we need is go through all css and append .rsp to every single declaration that’s inside a @media query:
Example:

@media (min-width: 980px) {
	ul.nav li.dropdown:hover a.a-caret + ul.dropdown-menu,
	ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
	ul.nav li.dropdown ul.dropdown-menu:hover {
		display: block;
		z-index: 1001;
		}
	}

would have to become:

@media (min-width: 980px) {
	.rsp ul.nav li.dropdown:hover a.a-caret + ul.dropdown-menu,
	.rsp ul.nav li.dropdown a.a-caret:hover + ul.dropdown-menu,
	.rsp ul.nav li.dropdown ul.dropdown-menu:hover {
		display: block;
		z-index: 1001;
		}
	}

After that, all we need is a trigger that toggles .rsp class on/off to body (or html). And the trigger code is above.

I read the links in your reply and have to admit they seemed way over my head. I’m a relative newbie so bear with me.

I understand your code above but I’m clueless about how to go about creating a “trigger that toggles .rsp class.” Do you have any code for that? I would like to try your method. If it works I think a lot of people would benefit from it.

Thank you for your persistence. @rdellconsulting is right, you are legend.

I wouldn’t advise on that. Not until we hear what @nikeo has to say on this matter.

Here’s what I think: providing a responsiveness switch is generally viewed as a good design decision and it’s where we’re heading. Probably in a less than a year’s time, it will be a standard feature on all responsive layouts.

Therefore, there’s a good chance that Customizr will implement it soonish, as it’s the most popular responsive free WP theme out there. If my presumptions are right, when this happens, CSS will need to be adapted for it and your quite consistent effort will be rendered useless. So, before you set out for this big task, wait for nikeo’s answer on this. (I just marked the subject for his reading).

If he says this is not going to happen soon, I’ll assist you with guidelines and code overview to make this switch, but I’d more happily do it for theme implementation in a future release so all theme users benefit from it, rather than as a mod for a single user, that’s prone to breaking on future updates of theme’s CSS.

Thank you for your efforts. You’ve gone above and beyond the call of duty trying to help me.