If I have something like this:
.div {
width: 105vw;
}
It won't go past the browser window. Instead, it will just make the browser wider. Does the same thing when I use a media query with max-width of 475px and I set the width to 600px. How do I get it to go past the screen? I am trying to do this:
// Make the div go past the screen on both sides
.div {
position: relative;
width: 105vw;
left: -8px;
}
And that seems to work on desktop, but not mobile.
Edit:
Viewport:
<meta name="viewport" content="width=device-width, user-scalable=no">
The issue is that the iPhone browser is zooming out to fit the entire contents of the page by default. The solution is to replace the <meta> tag with one that sets the initial scale, like so:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"/>
Related
I use Bootstrap and I set:
#media (max-width: 991px) {
body {
min-width:500px;
}
}
And when I login with my phone I have viewport less then window width, like that:
I need to set viewport same as window width. In bootstrap I have header:
<meta name="viewport" content="width=device-width, initial-scale=1">
And bootstrap says that I can't delete that. How can I edit my code to have viewport on mobile same as window width?
I am not sure if your issue is related to the view port. But in case if it is, you can try the following view port code.
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, target-densitydpi=medium-dpi, user-scalable=0" />
Its just because you have set min-width property to body element.
Try to use .container class from bootstrap it will solve your problem.
If you just wanted to use body element then go for this one...
#media (max-width: 991px) {
body {
width:100%;
}
If your content should be at least 500px wide, set min-width on your body.
body {
min-width: 500px;
}
If you want it to start zoomed out (as if viewport is 500px wide), use shrink-to-fit:
<meta name="viewport" content="width=device-width, shrink-to-fit=yes">
At some point I know I need to bite the bullet and do some serious reading on responsive and adaptive design, but I was hoping there was a really simple way to address this issue.
I have the following web page, shown here in my desktop browser.
And here is the same page on my cell phone.
Although it's probably hard to tell here, the banner is too small when viewed on my cell phone.
Ideally, I would like to have it so:
The width of the page content (and the corresponding width of my <footer> element, which has a top border) does not take up the entire width of the browser when it's full screen on the desktop, but does take up the entire width of my cell phone.
The banner would never be bigger than the pixel width of the image on my desktop, but would take up the entire width of my small cell phone.
Is there any simplified approach to this?
You can use media-queries to handle style changes based on the viewport. For instance, you can do something like:
JS Fiddle Example
/* Desktop Styles here*/
footer {
background: blue;
width: 500px;
}
.banner > img {
width: 300px;
}
/* When the screen is smaller than 560px, specify what properties you wan to change. */
#media only screen and (max-width: 560px) {
footer {
width: 100%;
}
.banner > img {
width: 100%;
}
}
Apart from media queries which you should seriously look into for serious responsiveness, you will also need to adjust the viewport meta tag in your header.
Add <meta name="viewport" content="width=device-width, initial-scale=1"> to your <head> tag to instruct the phone browser not to attempt to display the page as in a zoomed-out state.
So, for instance:
...
<head>
<link rel="stylesheet" type="text/css" href="Style.css">
<title>Hooray Banana</title>
<meta name="keywords" content="This page is a placeholder for future content.">
<meta name="description" content="sc web group">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
...
Then F12 and view in a phone emulation mode or check on your phone directly.
I have an element that is fixed to the top of the page, and scrolls with you when you scroll horizontally, the CSS is quite simple:
.thing {
position: fixed;
top: 0;
width: 100%;
height: 30px;
background-color: #CCCCCC;
text-align: right;
}
You can see the it here: http://jsbin.com/cetutaxaju/1
Works fine on most browsers, but with Safari on iOS 8 this bar is not 100% of the viewport, but 100% of the content?! (it was fine on iOS 7)
The culprit seems to the meta viewport settings:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0">
As you can see when I take them out: http://jsbin.com/cetutaxaju/3
Does anyone know why this is happening, or even better how to fix it?
I need the viewport settings to remain as the real site does not work well without them.
Have you tried adding user-scalable=no to your meta viewport settings? i.e.:
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1.0, user-scalable=no">
I had a similar issue and that fixed it for me.
I build an html landing page, you can see it here
I used the meta viewport tag in that way:
<meta name="viewport" content="width=device-width">
When I enter to this page from the mobile, the page width that not fit to the screen,
Iphone example - http://mobiletest.me/iphone_5_emulator/#u=http://tzabar.exactive.co.il/
what I've done wrong?
As per War10ck's suggestion consider changing your viewport meta tag to something like the following:
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
You can also make changes in your CSS to help you along. Consider changing the .content class. For example:
.content{
width: 100%;
max-width: 930px;
}
I'm not sure what your ultimate design goal is, but that should get you moving in the right direction. You could also look into something like Bootstrap http://getbootstrap.com/ to help you make sites responsive.
Firstly, follow the good advice from jmadden and change your viewport tag to something like
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Then at line 54 of style.css you have:
.content {
width: 930px;
margin: 35px auto;
}
You need to remove that 930px width or override it with media queries because at narrow viewports it's preventing your page layout from collapsing.
Hope this helps
I had wide length table with using twitter-bootstrap.css.
The content was sticking out from the edge of the table so I added this line to bootstrap.css.
min-width: 400px;
bootstrap.css
body {
min-width: 400px;
padding-top: 60px;
padding-bottom: 40px;
background-color: #27292b;
background: url('/assets/body-bg.jpg');
}
But now, When my smart-phone loads the page, initial looks zoomed up as default.
How can I make it fit?
index.html
<meta name="viewport" content="width=device-width, initial-scale=1.0">
With bootstrap, it is not straightforward to show tables with large amounts of content, especially on mobile devices.
First think about how much content is needed on a mobile device, and if still a problem, you can increase the size of the mobile viewport by reducing the initial-scale in the viewport meta tag as so:
<meta name="viewport" content="width=device-width, initial-scale=0.5">
This would double how much you could see - adjust the initial-scale value as appropriate.
Have a look at http://twitter.github.com/bootstrap/scaffolding.html#responsive if you want to find out how to hide some of your <td> elements on mobile devices.