I have created a css family tree by going through this tutorial. In desktop browsers it looks perfect. Here is how it looks.
Now I'm trying to make it display the same in iPhone and iPad screens. But when viewing it in those screens, it messes up the layout. Like so.
Note that some of the lines connecting the nodes are missing.
I have tried to resize the page using the html meta tags. Tried all the 3 lines below.
<meta name="viewport" content="width=device-width">
<meta name="viewport" content="initial-scale=1.0">
<meta name="viewport" content="initial-scale=2.3, user-scalable=no">
But no avail. I simply need to shrink the page to fit the iPhone and iPad screens. Can anyone please tell me how I can accomplish this?
I have also created a fiddle here to demonstrate the problem.
Thanks.
You asked in the wrong category :) this is more css then anything else.
I bet you found an answer by now.
But for your fiddle:
.tree {
width:1100px;
}
Just let me know if you need anything more.
Have a nice day.
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
I'm building an application and by far the weakest part of my game is Style and Design. But, I'm having one particular problem at the moment. I'm trying to make my dashboard responsive but when I look at the dashboard as an iphone 6 with my chrome inspector the screen zooms out really far and everything breaks... Here is a screen shot of what I mean.
See how the content is really far away... I really don't know how to fix this? Any idea what I could be doing wrong?
Please try to add this to your HTML's <head></head>:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Reference: w3schools
I have just launched my website http://www.connorgraham.com.au and am having responsive issues, specifically with mobile. Prior to launch, everything was working and looking perfect, however I have just realised that on mobile 20% of the right side of the screen is just white. The website should be full width and there shouldn't be this blank space showing.
I would appreciate any help, and am happy to provide any of my code if it would help solve the issue.
I have explained the responsive grid system Via bootstrap you can check
https://attariwebsol.wordpress.com/2015/04/24/bootstrap-grid-system/
and tell if this is not helpful to you I will explained according to your layout.
In your '<head>'
change <meta name="viewport" content="width=device-width"> to <meta name="viewport" content="width=device-width, initial-scale=1"> this should fix your issue.
https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
link: http://www.kelvinhanssen.nl/projecten/marktmix_responsive/html/bedrijven_responsive.html
I made my first responsive webpage, and it doesn't act the way I want.
When I test it in this app: http://www.studiopress.com/responsive/
My website does what it's supposed to do.
But when you display it on your phone it look like it's been zoomed out
I can't attach any images because my reputation isn't high enough.
Any suggestions?
Add <meta name="viewport" content="width=device-width"> to your header.
This will make it so that the phone does not 'exaggerate' its actual width when rendering the page, which is how they typically get web pages to look decent.
I had this problem when I was doing my first website, it makes it look like its a desktop webpage, even though you have it set to look on a mobile webpage.
Just add this to your head part of your website, and it should work.
<meta name="viewport" content="width=device-width">
Let me know if it works.
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