this is my site. http://losroblesrestaurant.com.ar/index7b.php. When displayed on a phone the menu doesnt fit on the screen. I need it to be viewd at 347 px width. I have already tried with media queries and viewport but it doesn't seem to work.
I have tried
<meta name="viewport" content="width=700, user-scalable=no">
<meta name="viewport" content="width=80%, user-scalable=no"> and
<meta name="viewport" content="width=device-width, user-scalable=no">
none of wich make any difference at all
I am not allowed to post images, so please check this: http://losroblesrestaurant.com.ar/images/iphone-problem.jpg
The code for the phone has
body{min-width:347px;}
EDIT:
You set a fixed min-width on .inner. You need to remove it.
You also have a width of 990px on .inner-blanco. Change it to 100%.
Related
In a viewport meta tag (as seen below), does the width property ever have a different value other than device-width?
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
Thanks in advance.
I tend to use this:
<meta name="viewport" content="width=device-width">
Although I see this is recommended a lot:
<meta name="viewport" content="width=device-width, initial-scale=1">
This means that the browser will (probably) render the width of the page at the width of its own screen. So if that screen is 320px wide, the browser window will be 320px wide, rather than way zoomed out and showing 960px (or whatever that device does by default, in lieu of a responsive meta tag).
Note: don’t use a responsive meta tag if your website isn’t specifically designed to be responsive and work well at that size, as it will make the experience worse.
I'm working on a responsive, Bootstrap 3-based design. When I resize the browser window on my desktop, everything behaves as expected, but when I went to look at it on my iPhone it doesn't collapse the menu as it should, among other things.
http://www.craftonhills.edu/Testing/ksimonso/Mobile_Site_Page
You need to add the viewport tag to your header:
HTML
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
You're missing the viewport meta tag within your <head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
I am having strange issue. I completed a website and was using screenfly from quirktools to see how it would appear on tablets and smartphones..... it look fine
When I viewed the site on a smart phone or tablet in real, it was showing the site in desktop version ... media queries are not working ... I tried chrome, firefox, opera all on my phone but non of them is showing my site in mobile version.
Friends can you tell me what can possible be wrong ?
I am using simple media queries in my css file
Did you set a meta tag for the viewport? Something like:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
Place this meta tag in between
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
You can also Try out this meta tag which will make your media Query work on all size of devices
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Thanks
I need some help. I have made this side in Joomla, and cant get my footer to have a 100% width on an Ipad. Its like it wont get furder then my footer content.
Can some one please help me adding the right css?
My website is: www.webkjaer.dk
And here is the Ipad emulator
Try adding this to your website head
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
I am trying to get a site with a fixed side nav working on the iPad. I realized that iPad doesn't support position:fixed very well, so the side nav just scrolls up with the rest of the page. Is there a decent workaround for this? There is no time to redesign the site for iPad before the launch.
Thanks!
You can use a fixed position, but you have to make sure that the meta-tags are set correctly.
Example:
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0">