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">
Related
I have been getting reports from a couple of users "Android users in most cases" that the website is opening as a white screen on their phones.
After some troubleshooting, I found out that if you zoom out and scroll around, you will find the actual website.
When you open the website, the viewport is showing a large white screen and the actual website is inside it.
I added this to the header.php <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1.0, minimum-scale=1"> and its not getting fixed.
Any idea why and how to lock the website content to the viewport cadre?
Screenshot sent by users: when they first open the website
Screenshot sent by users: After they scroll right and zoom out a bit
Edit:
First try changing your viewport tag to this:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
You could try adding the following CSS:
body {
width: 100vw;
overflow-x: hidden;
}
You could also try disabling zoom by adapting your viewport tag with the following:
maximum-scale=1.0, user-scalable=no
You might also want to look at the CSS touch-action property:
https://developer.mozilla.org/en-US/docs/Web/CSS/touch-action
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%.
Hi I just started develop applications for mobile devices, Have the next trouble. This site: http://dimax.co.il/development/test-ding/OscarWilde/#/menu dispalyed correctly on PC browsers, but on Safari on iPhone 4S, it should be displayed full screen but it much less then full screen. All css you can see there. Thanks for help.
Ensure you have view port set in your head section
<meta name="viewport" content="initial-scale=1.0">
A more complete answer for mobile sites would be:
<meta name="viewport" content="width=device-width, initial-scale=1.0 maximum-scale=1, user-scalable=no" />
I am trying to create a mobile friendly version of my website, to make my website responsive to a smaller screen size and scale accordingly.
I've created some media queries, that behave correctly in a browser when resizing on a desktop.
On my iPhone, safari just shrinks the entire website but still maintains the aspect ratio of the full sized site. How do I get the media query to be observed? have I missed something?
Here is a link to a sandbox which I am trying to get working correctly - any help or suggestions are appreciated:
http://www.preview.brencecoghill.com/
Do you have the meta for view port in your html?
<meta name="viewport" content="width=device-width, initial-scale=1.0">
More info here: http://webdesign.tutsplus.com/tutorials/htmlcss-tutorials/quick-tip-dont-forget-the-viewport-meta-tag/
I think you'll find a warning in Chrome with ; instead of ,
This should work just fine:
<meta name="viewport" content="width=device-width, initial-scale=1">
I just experienced the most bizarre thing after troubleshooting this same problem for a day. Something to try if all else fails...
My pages were perfectly responsive on my laptop during development but not on my iPhone, iPad or Samsung. I finally discovered I had to put a comment line after the DOCTYPE statement and before the html lang statement, like this:
<!DOCTYPE html>
<!-- This comment line needed for bootstrap to work on mobile devices -->
<html lang="en">
Finally, my pages were responsive on the mobile devices. Weird!
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">