Please note, some of the links in this blog post might be affiliate links. /** It is very helpful. You may also want to take a look at our article on the best plugins to convert a WordPress site into a mobile app. Fix submenus JS issue Replace jQuery by $, Fix! New close button color settings, New! But there was a specification to provide an option as a link to force the desktop version on a mobile device. Promotion Banner was remove from the WordPress admin dashboard, and dismisse button already works in the Mobile Menu options banner. Find centralized, trusted content and collaborate around the technologies you use most. now it is working. Google Chrome browser has a set of developer tools that let you run various checks on any website, including seeing a preview of how your website looks on mobile devices. If you set an element to have a width of 800px but the screen is 324px wide, you will not fit that element on the screen. i have full lenght table. Yoast SEO academy Know how to outrank your competition Why are physically impossible and logically impossible concepts considered separate in terms of probability? rev2023.3.3.43278. To have access to those features you will need WP Mobile Menu Premium. It is really give me headaches lol. It remains at device-width. } jQuery(viewDesktopLink).click(function(e) {. Do it Yourself How to Migrate Subscriptions from Shopify to WooCommerce? WordPress Post/Page Editor Preview. This theme is also recommended by Google and the theme also passes the Google Mobile test, which ensures that the SEO ranking for the . Simply log in to your WordPress dashboard and go to the Appearance Customize screen. To get the Hamburger Menu Functionality working on Mobile and Desktop devices you need to download the Responsive Menu Plugin and install it on your WordPress website. 2nd Level menus with touch to expand events, New! Overlay Mask when the menu is opened, New! Why is WordPress Free? Avoid undefined index when acessing to an array position, Fix! Provide to your mobile visitor an easy access to your site content using any device smartphone/tablet/desktop. can you help me out? Double space in Obsidian for Android does not give a fullstop. Code structure was reorganized, New! Mobile Smart is a powerful WordPress plugin that allows web developers to set up a truly smart mobile-optimized browsing experience for their viewership. When hiding an element, and switching to the view it's hidden on, you will see that this element is "muted". Thanks. When you visit that subdomain on a phone, it will show the full desktop version. It is the most powerful WordPress popup plugin and lead generation tool on the market. Make the code mirror fields resizable, Improvment! Not the answer you're looking for? Ive been working a website and I have it pretty much done however I the desktop view to be the same on mobile devices. This can be improved with a CDN, faster DNS, and TCP settings. In this article, were going to cover two different methods of testing how your site looks on mobile using desktop browsers. Your License Key show up in the dashboard, which you'll need for later. New filter in the close icon, New! Site design / logo 2023 Stack Exchange Inc; user contributions licensed under CC BY-SA. This is a very good plunging. could not show desktop view or mobile view. @hotawardhiphop Did you add the code I mentioned above to disable the meta viewport? iPad and iPhone users can also request the desktop version of a site from within Safari. Also, this is just one part of the solution. 4. Will you please link to the correct page so that I can help you to fix this issue? jQuery(meta[name=viewport]).attr(content, width=device-width ); You can also find us onTwitterand Facebook. WP Mobile Menu will work with any theme, but may require our help to hide the theme menu. Improved! Code was entirely rebuild to an Object Oriented programming approach. The difference between the phonemes /p/ and /b/ in Japanese, Surly Straggler vs. other types of steel frames. Fix empty mobmenul-container, Fix! So both are necessary. You wont see these on your live site. So, simply setup a sub-domain and forward it to your website (using masking). This helps us support the blog and produce free content. I'm using a block theme but I don't know why that would make a difference. Apart from the stated objectives, the understood requirements are building an SEO friendly, speedy, and responsive site. Even if youre using a responsive WordPress theme, you still need to check how your site looks on mobile. var desktopBreakpoint = 980; What does "use strict" do in JavaScript, and what is the reasoning behind it? We have been creating WordPress tutorials since 2009, and WPBeginner has become the largest free WordPress resource site in the industry. Massive reduction of the file size of the icon fonts, Improvment! }. When I disable the mobile theme in the mobile tab, very little changes and it does not look like the desktop version. * @link http://codex.wordpress.org/Plugin_API Revert the HTML of the Mobile Menu to the wp_footer hook instead wp_open_body because there are still many themes not following the guidelines, Fix! However, the process should remain identical. It is just not working on any other mobile device (Android, Windows etc.). No coding knowledge is required. Not the answer you're looking for? This means if you click on some of our links, then we may earn a commission. Removed unnecessary Enable button, New! I would like to ask how to force desktop behaviour in wordpress with mobile phones? { Renamed push wrap divs to a more specific id, Fixed! Linear Algebra - Linear transformation question. Staging Ground Beta 1 Recap, and Reviewers needed for Beta 2. On mobile devices, these should ask for minimal information, ideally just an email address. A place where magic is studied and practiced? Enable Cache ON This is the final step required for enabling the caching functionality of the plugin. Click on it, and head on to create a new menu. jQuery(meta[name=viewport]).attr(content, width= + desktopBreakpoint ); Display normal logo if retina isnt uploaded and vice versa, Fix! You can also subscribe without commenting. Child theme inherits the functionalities and styling from the main theme. Works with all WordPress responsive themes. To subscribe to this RSS feed, copy and paste this URL into your RSS reader. Only the Premium support is better and faster. Beginners Guide: What is a Domain Name and How Do Domains Work? 2021-02-26: 4.4: CVE-2020-28646 . wp_enqueue_style( child-style, get_stylesheet_directory_uri() . Click Entire parent link to open submenu, New! here is the site uhappyevents.com no error but not displaying desktop version, function myCustomFunction() Let's first take a look at how the mobile preview in the Post and Page editor works. Method 2: Check if you have any caching plugins on your site or any server level caching enabled. (Comparison), 5 Best WordPress Membership Plugins (Compared), 7 Best WordPress Backup Plugins Compared (Pros and Cons), 5 Best WordPress Ecommerce Plugins Compared, 9 Best Live Chat Software for Small Business Compared, The Truth About Shared WordPress Web Hosting. There is no way to force otherwise. When Do You Really Need Managed WordPress Hosting? I am using OceanWP theme (reason why I am posting this question here) with Elementor Pro to do the website. Fix! 3. SO - bootstrap-3-desktop-view-on-a-mobile-device, SO - how-to-show-desktop-version-on-mobile-screens-in-bootstrap-3, As for me I use this one I set the initial viewport scale to 0.1. 5. Step #5 Visit Mobile Smart settings and adjust as desired. Hold Command (Mac) or Control (Windows) Hold down the Command key (Mac) or Control key (Windows) while you move an element. * @link http://codex.wordpress.org/Child_Themes Method 1: This can easily be fixed by going to WP admin > Elementor > Tools > Regenerate CSS. Links Free Demo On the bottom of the left-hand side, click on the mobile icon to view the mobile version on the desktop. Asking for help, clarification, or responding to other answers. New! Hi Shabnam, You would want to check your site to see if you have a plugin that would be enabling that mobile view as that should not be default WordPress behavior. This is EXACTLY what Im looking for and this seems to be the only article I can find online that is fairly straightforward. jQuery(#viewDesktopLink, #viewDesktopLink1).live(click, function(e) {, // set viewport content width I am testing with Google Chrome's built in mobile tester. Fix! else A decent search function. Here's how: Step 1: In the address bar of the Android browser, type, " about:debug ". You can grab a copy of the WordPress desktop app here. How to force desktop mode in Wordpress when viewing in mobile phone? }); Ruben at the point where you have set viewport content width, try updating it to this // Load the stylesheet Since i am running in a wordpress multi site a dont have access in function.php to put this code. If you preorder a special airline meal (e.g. I have to click View Full Site at the bottom to display the responsive theme. So I cleared the cache with W3 Total Cache and put the code in the OceanWP child theme and still do not work. You should not use empty rule declarations (located under body rule in CSS). jQuery(meta[name=viewport]).attr(content, width= + desktopBreakpoint ); { Styling contours by colour and by line thickness in QGIS. * So, using the same steps, Safari and Chrome users on the iPad or iPhone can use this link to switch to the desktop site. What are the Costs? Acidity of alcohols and basicity of amines, Using indicator constraint with two variables. Just add below code in the funtions.php of the child theme. Are there tables of wastage rates for different fruit and veg? Search for jobs related to Force desktop site on mobile wordpress or hire on the world's largest freelancing marketplace with 19m+ jobs. ncdu: What's going on with this second size column? Fix the close of the menu panel when clicking in internal links, Improvment! Let me know if it doesnt help you. The class mobileSpecific, has to be added in the style.css of your theme, to ensure that the link is visible only on a tablet or a mobile device. Would you like to support the advancement of this plugin? Bonus: Check out our pick of the best business phone services, so you can add a click to call button for mobile users. Custom js field to help in any tweak or fast fix, New! Click Add New : 3. But i have a issue, when i click then its show exactly as desktop version BUT when i try to back from Desktop view then its doesnt work ? 4 Answers Sorted by: 43 You just need to set the Viewport <meta name="viewport" content="width=1024"> Instead of this (Responsive version) <meta name="viewport" content="width=device-width, initial-scale=1.0"> Look at here. (Comparison Chart), How to Properly Move WordPress from HTTP to HTTPS (Beginners Guide), How to Code a Website (Complete Beginners Guide). { Showing the Desktop Version on a Mobile Device Now, to begin with the implementation. I meant to put that the site is not active yet so no live version available. The theme is pretty flexible and can affect the colors, website logo, icons, fonts and social icons. In mobile_log_d, there is a possible information disclosure due to improper input validation.