I created a simple website: http://mpl.mediatech.co.in using Foundation 5, and it works ok on Desktop / Firefox Responsive Design View:
but on the iphone / android phones, it looks like this:
What am I missing?
I had missed out on adding this important meta tag...
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
That fixed it. Leaving the question up in case someone else does the same mistake.
Related
I used Google Material Design Lite to build my website but it won't mobilize... I did everything right and it works fine on the computer even when the Browser is shrunken down to a phone or tablet size. It mobilizes the site on there when the Browser is shrunked but not phones or tablets. I really need help fixing the issues with the site not reading the phone or tablet as smaller screens. Can anyone help?
Try adding this line to your html's <head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
I recently launched a site I was working on and with a responsive theme, but it displays the desktop version on cellular devices. It works properly on my staging site, but after migration, the live site does not display properly.
Live Site: http://www.sterlinganalytics.com
Stage Site: http://stage.sterlinganalytics.com
I have already cleared the cache and got the same result.
Unless I missed it, I believe you are missing the responsive meta tag on the live site:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Why the extreme responsive in the pc and mobile web page is different?
I've used the following code to create responsive......
<meta name="viewport" content="width=device-width" />
in chrome resized
in iphone 5
(1) Double check you have indeed included a veiwport meta tag in the head of your document, I'm not seeing it on the link you posted
<meta name="viewport" content="width=device-width, initial-scale=1.0">
(2) I'm seeing a 404 for http://foadalijani.com/include/css/top_nav.css
(3) Use web inspector to look for elements which may be breaking your responsive layout. e.g. Looks to me that that .home_menu_top_bg has a hard coded width of 890px which will cause problems. Maybe change this to a percentage. I think there are other elements with similar issues.
Good luck!
I have created a non responsive design (intentionally) but find that is cutting off on the right on mobiles and tablets. I want the mobile sites to look identical to the desktop version. The url is http://wantherwardrobe.com/
I'm seeing your site in my iPhone and it seems that you have a «mobile theme» or something. To maintain the aspect of the site trough devices you should change this tag:
<meta name="viewport" content="width=1290">
to this:
<meta name="viewport" content="width=device-width"/>
Hope this helps
I'm trying to make a website responsive and looking good on smartphones and tablets.
Here's a link to this website: http://fineart.d.dev.vendo.no/
The problem is that my mobile devices don't see a media queries I wrote specifically for them.
I know that this question is really often asked here on Stackoverflow but I didn't found any solution for this problem. Here's my code:
#media only screen and (max-width: 768px) {
/* Some mobile-specific code goes here */
}
I tried to use max-device-width and added
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
to the section but without success :(
Could you please help me to solve this issue? I realy stuck with it and need your help.
Thank you in advance!
I'm not seeing the viewport meta tag in the head of the page -- am I missing something?
I would recommend using this meta tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Having "maximum-scale=1" will prevent users from scrolling, which is commonly seen as an accessibility problem. Let a user zoom if they need to.
As for the media queries, I looked at your CSS, but I didn't actually see any media queries present. Are you sure that the CSS file with those queries loading?