The main div is 600 pixels wide. By my understanding, an iPhone 5 is 640 pixels wide. But when I pull the website up on the iPhone 5, the main div only takes up a small fraction of the screen, maybe a third. Why is that?
Website
So I've seen IOS shrink content so that the whole page is displayed on the phone screen when using css transforms.
So the offending css was
background: url('/images/mobile-device-down-arrow.gif') no-repeat center;
transform: rotate(180deg);
-ms-transform: rotate(180deg);
-webkit-transform: rotate(180deg) scale(1);
we replaced it with
background: url('/images/mobile-device-up-arrow.gif') no-repeat center;
and it fixed the problem.
I remember a bug in webkit for this, but I can't find it right now.
This just happened to me and I managed to fix the issue by wrapping the affected elements that were being shrunk in a div that defined the exact width that the element needed to be, in my case this was: width: calc(100vw - 2rem);
Hopefully this helps anybody having this issue, it seems to only occur on mobile devices when using the rotate transform with transition at any positive degree as when removing the transform, the element reverted to 0deg without shrinking.
Related
I'm working in web project(Angularjs) and facing one problem. I have given height: 80% and my screen resolution is 1280 x 1024. but when I opened same project in my laptop(Resolution 1386*768) Div get invisible. I have tried following code
#media (min-height: 500px){
#chatViewList
{
overflow-y: auto;
position: relative;
height: 80%;
}
}
Please suggest andd help me.
Is the height of the parent element fixed? If not you can't use a percentage based height (there are some exceptions but they're unlikely to be practical).
I would suggest using the viewport height unit instead. vh allows you to specify a height in relation to the viewport window.
#media (min-height: 500px) {
#chatViewList {
height: 80vh;
overflow-y: auto;
position: relative;
}
}
Browser support: http://caniuse.com/#search=vh
VH is what you need!
height: 100vh; = 100% of device height
You can of course use like 80vh for 80% of the device height. VH means viewport height
You can set the responsive height of a div when it's part of a parent div that has a defined height.
Or, You can pre-define the height of the div or dynamic specify static values based on various commonly available heights <-- could be an overkill but can work.
Alternatively, try the following links"
https://www.sitepoint.com/community/t/how-to-make-div-height-responsive/30438
OR
http://www.minimit.com/articles/solutions-tutorials/bootstrap-3-responsive-columns-of-same-height
Its not best practice to create media queries to resolution height. how ever as you asked here I guess you trying to create full screen web page. to make it work set you html tag and body tag height 100%
ex:
html, body {
min-height: 100%;
hight: 100%;
}
like this what ever resolution you working on web page hight will remain 100%. then add CSS height as percentage as you wish. And also make sure you set min-height and max-height to all.
This is a little trick that I am using when creating full screen web pages
Hope this will help
for calculating the screen height for every screen we can use this formula.
height:calc(100% - 200px);
which calculate the height and subtracts 200px from it.
we can use any value in place of 200px
example
#div1 {
height:calc(100% - 200px);
}
if the screen size is 1000, Resulting div1 height will be 800
I am currently working on this repo with my friend: https://github.com/openteach/openteach.
I have this bug that I can not fix. I have tried everything, but nothing seems to work?!
I have attached a picture of the bug.
Any help/ideas is appreciated.
Thanks.
Picture of bug:
Bug
You can do as Mike King suggest, just remember to set the background size to cover aswell:
background-size: cover;
This will make sure the background will always cover all of it's element, no matter what size the image is.
Another thing could be the element is not taking all of the height of the viewport. This can be fixed by setting the height relative to the viewport like:
body {
height: 100vh;
background-image: url(assets/images/stardust.png);
background-size: cover;
}
Set the background on the body, and you won't have a gap any more
body{
background: url(assets/images/stardust.png);
}
The sum of the heights doesn't fill the whole page, and you only have the background on the <div class="App_component">
The other way is to set that class on the body tag:
<body class="App_component">
I developing a mobile website with angular-material which uses a floating button on the homepage as seen in many Google Applications. The button is always present and fixed in the right lower corner. It all works well. However, when I scroll the page and the browser address bar hides, the body height changes as well. The result is that the button moves up, too. See the images for better understanding.
This is the CSS of the button:
.floating-button{
position: fixed;
margin-top: 120%;
margin-left: 80%;
}
When i use top instead of margin-top, the button moves up and once the address bar is hidden, it jumpes back down.
Is there any possibility that the button will stay fixed? I would prefer not forcing the address bar to hide or stay fixed. Thanks in advance!
.floating-button{
position: absolute;
margin-top: 120%;
margin-left: 80%;
}
Try using the position absolute rule instead. Position absolute keeps an element on the page where you specify it independent of other elements.
I know this is an old question, but I came here with a similar problem and a combination of your question and what I already had solved my problem.
What I had is that the FAB would get hidden (move down) when the address bar is triggered and Kiko's answer didn't change that, so I assume it would bring my problem to your code.
For it to stop moving, I had to change my position: absolute to fixed like yours. The rest of the CSS is below:
.floating-button {
position: fixed;
right: 20px;
bottom: 20px;
}
I hope this helps future people passing by.
I’m not english speaker and I will try to explain my problem in the better way I can.
I’m designing my first responsive website using CSS.
Until now the things are going slow but fine.
My first test page is responding correctly in all widths of the desktop browsers, including narrowing them until its smaller width.
After this tests I loaded the page in my NOKIA 5800 smartphone that uses Symbian.
My main problem is the following:
The test page is loaded correctly in NOKIA 5800 smartphone and when I rotate the phone, the page adapts it internal elements to the new width.
It is OK, BUT… when I zoom the page (double clicking on the screen), the page is zoomed and the browser narrows AGAIN the internal elements to the new more narrow width and I dont want the page be responsive in zoom (FOR EXAMPLE: when the page is loaded at 320px width resolution)
I want the elements only be zoomed when I zoom the page. Am I explaining correctly?
My page appears to be so much responsive!!!!! :) or some thing is not working fine.
In other words…. even the page adapts the DIVs (etc) at the more narrow width on desktop browsers, the problem is when I zoom in smaller screens (smartphone), because some elements are additionally narrowed and it is so much .
I used several variations of tag:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
... but this kind of smartphone stills adapting the widths when zooming the page.
Some thing is not working.
I limited the body to zoom: 1 in the CSS
Body width is set in 100% for all resolutions.
I need that when zooming (scaling) the page, these widths dont be modified.
Before destroying my smartphone :) I ask…
Is there some way in CSS to avoid the responsive effect when I zoom?
I don't know what more I can do.
I hope I have explained this issue clearly so that someone can help me.
These are the main parts of the CSSs
in Main CSS:
body {
/*background-color: white;*/
background-image: url('images/background_pages_gris-ruido.jpg');
line-height: normal;
color: black;
z-index: 1;
width: 100%;
zoom: 1;
display: block;
}
In MEDIA Css:
#media screen and (min-width: 961px) and (max-width: 1152px){
body {
background-color: transparent;
line-height: normal;
}
#DIV_GLOBAL {
width: auto;/*950px;*/;
display: table;
float: none;
background-color: transparent;
margin: 0px auto 20px auto;
}
Now I revised the test page using an iPad and a Samsung Galaxy S3 smartphone. In these devices the page can not be zoomed.
The problem is with smartphones like my Nokia 5800. Is there some way to avoid responsive effect when zoom?
I hope these data can be enough to analize. Thank you! GusSiglo21
http://cardiffhosp.rapdevs.co.uk/ has been built around the WooTheme Canvas, which is a responsive design.
I've had to disable the viewport meta tag, because I don't want the layout to be responsive.
It now looks much better on mobile devices, but a white area is appearing to the right hand side. Mostly visible on iPhone/iPad, but zooming out on other devices shows the white space is there.
Adding the following code, solved my problem, but caused the navigation to stop working on iPhones and caused display issues on a Windows 7 phone...
html, body {
overflow-x:hidden;
}
Has anyone got a better solution for removing the white space?
You can try adding width:100% and see if that solves the issue the overflow is causing, IE:
html, body {
overflow-x:hidden;
width:100%;
/* You may also want to try adding:*/
margin: 0;
padding: 0;
}
If that still causes problems then you will need to find the element that is causing the issue.
Couple ways to do this. (Be sure to remove overflow-x:hidden; before starting.)
1) Open the inspector, start with the divs or elements that contains other elements. Set those divs to display:none. If the excess white space disappears then you can find the offending element and fix its CSS.
If that option is too time consuming or you have trouble doing it, you can try another option:
2) This site has some CSS which outlines all of the elements on your site. This can help you find what is causing the overflow. The CSS used on this site is:
* {
background: #000 !important;
color: #0f0 !important;
outline: solid #f00 1px !important;
}
They also provide a javascript bookmark that helps with this as well.