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
Related
I'm using bootstrap media but I'm using it only for my navigation, the other code is just ruining my current. When I visit the website from mobile it's zoomed in. I added the media meta <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">, and the website is not zoomed but I can't scroll at all. I viewed every answer here and nothing helped.
If anyone helps I will be very thankful, have a great day!
The maximum-scale. perverted from zooming. So, read this to know how to deal with it:https://developer.mozilla.org/en-US/docs/Mozilla/Mobile/Viewport_meta_tag
https://github.com/twbs/bootstrap/issues/12738
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 just started learning html/css/javascript and decided to throw together a website for practice. I now know that a lot of the approaches I took in creating this website are seen as bad practice, which is why I will not continue to do them. What i'm having issues with is getting the mobile layout I see on Firefox's mobile emulator to appear as is on an actual mobile device. Any advice on how to fix this issue?
Thanks in advance!
Website Files
Most modern browsers have some basal CSS-styling already: if you type in a <h1>sentence</h1> like this without the basic HTML elements, Chrome will still deliver the webpage.
I built a basic web-design framework like Bootstrap, and these three lines are critical in making a responsive webpage. Make sure to add them at the top of the <head></head>.
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Content-Language" content="en">
<meta name="viewport" content="width=device-width">
The dropbox files wouldn't open, so I haven't seen your work. Try adding these and see if it works.
Try adding this meta tag to your pages, in the <head> element:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
I had this issue with Bootstrap awhile ago and then found this nifty answer online. I also would recommend using something like Bootstrap or Materialize.
Morning All,
I'm hoping someone can advise me on the amendments I need to make to my website's CSS to make it display correctly on a mobile device.
At the moment when you view the website in mobile device the menu navigation is displaying at the same size as if it was on a desktop PC, but the rest of the website looks absolutely fine.
From which I can see the navigation uses % once it hits a specific width.
So how can I correct this issue?
I look forward to hearing your fixes.
Please see the website below:
http://www.blanchel.com/
try this:
<meta name="viewport" content="width=device-width, minimum-scale=1.0" />
if you don't want to allow zooming, add max-scale at the end:
<meta name="viewport" content="width=device-width, minimum-scale=1.0, maximum-scale=1.0" />
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.