juniorgoldreport.com is the website I'm working on and it's made in wordpress.
I'm using this plugin specifically - http://shiftnav.io/free/
The plugin for mobile nav bar is incredible, I enjoy it's functionallity and ease of use greatly.
It has a setting to set when to show the toolbar, I chose to show it at 960px. The only change that I have done to it.
When I resize my desktop window, the navbar apears (I haven't done the necessary changes to remove the header and old nav when making the new one apear). So far so great.
The issue is, on mobile view, the navbar doesnt apear. I'm going to assume the plugin is using
#media (max-width:960)
vs
#media on screen and (max-device-width:960)
But I'm not totally sure. Anyone have any idea's as to why it's happening?
EDIT - images to get you a better understanding.
The nav bar when a desktop window is rezied - it apears (yay)
The nav bar DOES NOT apear on mobile devices though - I'm not sure why
In short: your site is not actually responsive, because the viewport meta tag is missing, so the site displays at a 960px width on mobile devices. Since that is above the breakpoint, the menu does not display.
The issue is this typo in your site head:
<meta name"Keywords" content="Gold reports resource stock news and top gold articles"
<meta name="viewport" content="width=device-width">
The Keywords meta has two syntax errors a missing '=' after 'name', and a lack of closing >
As a result, the viewport tag is never read by the browser, so it has no effect. Without the viewport tag, the viewport is displayed scaled on a mobile device, rather than responsively. Since the mobile viewport is displayed at 960px width, the media query does not apply, and the menu remains hidden as it would on a desktop screen.
Fix the syntax errors in the first meta tag and the issue is resolved.
<meta name="Keywords" content="Gold reports resource stock news and top gold articles">
<meta name="viewport" content="width=device-width">
Hope that helps
Related
I want to make a embed version for my site at url https://staging.immo-suedtirol.com/jobs/?iview=embed
It work well on desktop view. but on mobile view it seem not work. I use developer tool to check and see: site width always in 980px This is what I see on developer tool. Content width always fixed to 980px for small screen view.
This really strange. This is first time I get it.
You must add meta tag in the html header for screen width
<meta name="viewport" content="width=device-width, initial-scale=1">
https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag
So, I'm developing the website and it works well on PC screen but doesn't work on mobile screen.
At first time website looked as 'before changes on mobile'
I thought the problem with size of main picture and changed the size from 700x700px to 500x500px. I changed the width of div with the description(below) from 1200px to 900px as well. And after that website looked as 'on mobile screen'. As you can see,changes didn't help. The white line remained in the right side of mobile screen. I don't have any ideas how to solve this problem.
Have you tried optimizing the view using the following code?
<meta name="viewport" content="width=device-width, initial-scale=1">
Perhaps you should also try repsonsive design frameworks like Bootstrap.
We have built a website using Bootstrap 3.3. The website appears fine On Desktops and Tablets and on Android devices, but on Iphones it seems to load the website zoomed.
i did put the below meta tag
<meta name="viewport" content="width=device-width" />
If i put initial-scale=1 or minimum-scale = 1 or maximum-scale = 1, the website loads zoomed on both iphone and android. If i do not have them it loads zoomed only on iphone.
Can anyone suggest what the issue is and how i can resolve it
how to use viewport
The page is not responsive ... it is a real shame! Google it will take into account and will penalize your rankings
English info about the viewport meta tag
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
Naviego is right. I know by your comment that your client wants to have the responsiveness removed but whats the reason? He is right that google will penalize your ranking if your website is not mobile friendly. You should check it out..
https://www.google.com/webmasters/tools/mobile-friendly
I tested it for you, and it says that your content is too big for a mobile screen, as you can scroll to the right.
I'm using Bootstrap for a website and I notice that when I view my layout on a mobile device, my mobile's web browser automatically zooms in to a particular top left corner portion of the webpage. I want the browser to show the whole webpage at start instead of zooming into the top left corner. Showing the whole webpage (albeit may be a little small in size) is the default behaviour when I don't use Bootstrap.
Is it possible to get Bootstrap to show the whole webpage instead of zooming in to the page when first entering it on a mobile device?
This most likely has to do with the viewport being set. Assuming your webpage is a standard size, you can use:
<meta name="viewport" content="width=1024">
make sure to place that in the head of your page - or replace the one that is currently there.
I believe you're looking for the Viewport html tag: https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
You can disable it by removing the viewport meta code from your . This worked in my application. If you want to have it correct for your device, put this in into head tags.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
http://getbootstrap.com/css/#overview-mobile
http://getbootstrap.com/getting-started/#disable-responsive
I'm making a theme for a site where I can't change the markup or include any JS. I can only control the CSS of my theme, and I can write some HTML inside the page body only.
I'm trying to make this theme responsive, but I can't see how to control initial-scale or page zoom on handheld devices without a viewport meta tag like this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
So what happens is that even though I can apply a mobile-specific layout through CSS #media queries, the site is zoomed out when viewed on a phone. Text and images are too small until you zoom in, and once you zoom in, the layout is too big and there's a horizontal scrollbar. It looks perfect inside a resized browser window on desktop; the issue is that the phone browser automatically scales the page.
So I'm seeking a workaround. I have two lines of thinking currently, and I'd welcome any other suggestions:
Is there any way to do what the viewport meta tag does in CSS alone?
Can I force a max page width in my mobile-specific styling so that mobile browsers will not scale the page?
There is #viewport, it might help you with that. But the support is very little. Have a look at this link http://dev.opera.com/articles/view/an-introduction-to-meta-viewport-and-viewport/