When I view my website on a mobile screen of iphone there is a white space on the right side of the screen and I can't figure out what is causing it. It seems to be only in the header section too.
Any suggestions?
Thanks.
URL
I see your site and i think that your site is work fine in browser but it create a problem with mobile your site is fully responsive and there not any white space in desktop resize but your media query not work in mobile so put this meta tag in your head tag and check again in mobile
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0">
try to add
margin:o;
if you post your code, i can provide you the accurate answer and one more thing not every one have IPhone lol :)
Related
I'm experiencing a serious problem with viewport metatag while browsing on mobile.
Adding this line to my <head> tag:
<meta name="viewport" content="width=device-width, initial-scale=1">
Makes the whole site display everything 10x bigger, won't display background images at all.
What am I doing wrong? This only applies to mobile version.
After using metatag:
EDIT:
I'll add another screenshot to show exactly this same part of the page.
i think i found problem)
all of you query start from min-width >700px
you can write #media(max-width: 968px) - and all must work fine
play with query rules
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.
My website is built using HTML5 Boilerplate, and is being cropped on the iPad when the iPad is positioned vertically, but appears the way it's supposed to when the iPad is horizontal. Here's the link to the site I built: http://designedbyallison.com/hhsc/
Basically, the area that shows the website is being scaled down while the website design elements themselves appear to be the right size within the iPad display area.
I've tried to locate which lines of code in the CSS or JavaScript files control this aspect of the website but can't figure it out. I have even tried removing the JavaScript and CSS within the html file and the scaling issue is still apparent. Any help is appreciated.
You may find the <meta name="viewport" /> tag helpful.
I'd start with
<meta name="viewport" content="width=device-width; initial-scale=1.0" />
I'm in the process of developping a Web Application for mobiles. I
went with web applications because to me it seems a winning situation
having to develop one application that could run also on iPhone /
Windows Mobile / Palm etc.
I started testing today after a few days of doing concepts, ideas and
designs and what I wanted to do was have a menu that sticks at the
bottom of the page. Exactly like the menu on the bottom in this iPhone
application screenshot :
Using CSS, I though it would be really easy to do this. Only using
position:fixed; bottom:0; would have done the trick but I have found
it doesn't behave the same on mobile browsers
I tried to split my page in 2 sections : 1 would be a scrollable div
(for the content) and the other one would be the bottom menu.
Scrollable divs also do not work on Android. I also tried using frames
with no luck either. Does anyone know of any way to re-create a menu
that would stick to the bottom of a page for mobile phones?
On my Android N1 with CyanogenMod i had this trouble too and the fix:
<meta
name="viewport"
content="width=100%,
initial-scale=1,
maximum-scale=1,
minimum-scale=1,
user-scalable=no"/>
Specifically the user-scalable=no; part, you can also put 0 instead of no.
Interestingly this breaks androids rendering of buttons, but all you have to do is set a background color to buttons.
Just add:
<meta name="viewport" content="width=device-width, user-scalable=no" />
to the page and you're set for Android 2.2+. This worked on a page I was testing on my phone. Source: When can I use CSS position:fixed?
This is supposed to work :)
http://doctyper.com/archives/200808/fixed-positioning-on-mobile-safari/
Just got an upgrade to Android 2.2 (Froyo) on my HTC Desire, and I'm happy to say that position fixed now works, at least when you use the viewport meta tag to set initial-scale and width. Still doesn't seem to work on regular web pages though.
I confirm that using the meta name in your html header
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
you'll have a fixed div on scrolling vertical and horizontal on Android 2.2, 2.3 and up
and iOS 4 and up.
I made an example here:
https://dl.dropbox.com/u/908148/website/test-scroll.html