need some help with a website I'm working on.
Portrait mode on Android looks like this:
Now, landscape, no css change:
No problem whatsoever. Follow me to the next screenshot illustrating what happens on iOs Safari/Chrome in portrait mode. Everything fine:
Landscape mode goes to "fullscreen" since it's an SE so I figured the screen, being quite small, goes full screen and that still looks fine.
I can scroll through the content no problem. However, when I click a link to go to another page this happens:
The behavior of the page is quite simple: the scrollable content is inside a div which is the rounded one which mustn't move during scrolling. What happens is that the rounded div is set to be 100% height of the screen and when top and bottom navbars appear on iOs, the rounded div won't change its height to adapt to the usable screen part.
body css is as following:
body {
margin: 0;
height: 100%;
overflow: hidden;
-webkit-text-size-adjust: 100%; }
while rounded corners div is managed like this:
.rcorners {
position: absolute;
margin-top:15px;
margin-bottom:15px;
margin-left:15px;
margin-right:15px;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%-20px;
height: 100%-20px;
background-color: white;
border-radius: 10px;
-moz-box-shadow: 0 0 6px 2px #C0C0C0;
-webkit-box-shadow: 0 0 6px 2px #C0C0C0;
box-shadow: 0 0 6px 2px #C0C0C0;
overflow:hidden; }
Any ideas on how to make the height right everytime the usable screen size changes?
Thank you
So sadly iOS has been notorious for this type of stuff for what seems years. First it was the top address bar, and now it is the browser menu. So you have a couple options. YOu can set a media query for landscape and shorten the height of that container and just have it scroll if you need. Could probably drop font-size too. Or there are a couple options in this article that might help.
You could also try 100vh instead as well. As that will make it the full height of the available viewport which I have seen at times act the way I needed it to vs 100% height.
https://www.eventbrite.com/engineering/mobile-safari-why/
Related
I'm making a responsive website that has pages with several nested <div>s with various 1px borders. I have overflow set to auto in case some unexpected element exceeds the screen size.
In Firefox everything looks fine.
But in Google Chrome, sometimes grey scrollbars (unscrollable) appear even when there is no overflow content. Sometimes it's X or Y or both, depending on the zoom level.
The problem disappears when turning off the 1px border.
I've done further testing and the problem appears on Windows 7 and 8.1, but not 10. The behavior on my computers are opposite for Windows 7 and 8.1. When zoom is 100% Win 8.1 shows scrollbars, while Win 7 does not. When zoom is 90% or 110% Win 8.1 does not show scrollbars, while Win 7 does show.
If I wrap the <div> with border with an outer <div> with no styling, the scrollbars disappear most of the time except for 75% zoom.
Using box-sizing:border-box; did not help.
Is there a simple solution I can use to fix this without having to change things in the body or breaking the styling of the other various pages on the site?
Here is a jsfiddle test which is fine on Firefox but shows X scrollbar in Chrome at 100% zoom for me:
https://jsfiddle.net/tsr1w630/0/
html {
margin: 0;
padding: 0
}
body {
background-color: #fff;
color: #000;
font-family: Arial, Helvetica, sans-serif;
margin: 0;
padding: 3px;
overflow: auto;
}
.box_with_border {
display: block;
border: 1px solid #CCC;
overflow: auto;
padding: 3px
}
<div class="box_with_border">
asdf1234
</div>
I attached a screenshot here:
Even though I've set a max width/height for my image element, it'll still extend upwards when I zoom in on the page. Any help here :)?
.column img {
width: 80%;
height:450px;
max-height:450px;
min-height:450px;
max-width:80%;
border-radius: 50%;
border: 1px solid black;
margin-bottom: 20px;
box-shadow: 6px 6px 6px #000;
}
website 100% view
website 120% view
I know 1 way to solve this if you want with CSS only.
With CSS: you can make break points in your page. So in resolutions that you set your page will be responsive. You can check This . And you can not use (%) for solve your problem. Only with px. If you set
height:450px;width:450px;
this will work for the circle but will not be responsive. And the px of width must be the same with height. And the BootStrap is some files that can help you with the responsive design.
For some reason when you go to the homepage of my site:
bluestarnj.com on chrome or safari the top of the page is cut off. This only occurs on laptops with small browser heights. It renders perfectly fine in firefox. Now if I tell it to position itself 300px from the top, it will render correctly in those browsers, but then in firefox it is pushed too far down the page. CSS code for the class is below:
.main_content {
width: 1000px;
height: 900px;
margin: auto;
position: absolute;
top: 50px;
left: 0;
bottom: 0;
right: 0;
background: linear-gradient(white, grey);
border-style: solid;
border-width: 0.188em;
border-radius: 1.563em;
border-color: red;
display: block;
}
You need to remove margin: auto; from your .main_content div.
When the window is smaller than that div it's still centering itself but at the cost of going off the page. Don't worry about vertical centering on smaller screens, and just do that on desktop once the viewport is bigger than that div.
The problem seems to be with the margin of the "main_content" div. I tested on my laptop and on a huge monitor with chrome and this is what I get:
As you can see, on a smaller screen the top and bottom margins become negative. I found this question: Margin auto goes to negative values where someone mentioned a conflict between top and bottom. This is exactly the case here: you set the top and the bottom as well as the fixed height. For some reason Chrome first sets the top to 50, then tries to adjust the margin (because it's set to auto) so that bottom will be 0. Remove bottom: 0px and it works!
EDIT: but it won't be centered vertically anymore.
I have problem with margin: auto - vertical centering
#something {
width: 97%;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
bottom: 0;
margin: auto;
}
This work in every modern browser - when the page (viewport) is higher then 300px, its centered vertically, but, when the page(viewport) is lower then 300px stopped it works everywhere except in firefox... In firefox run it good (maybe it is bad functionalitiy, but its logical functionality) in other browsers the top of centered element disappers in the top of viewport.
http://jsfiddle.net/LhHed/2/ Here is god example - when you resize result window, in firefox work it well, in others browsers not. Is posible tu fix it? Or its bad functionality of firefox?
EDIT: live example http://dev8.newlogic.cz
From what I gather, you're wanting the top of the divider to display at the top of the page. This currently isn't happening because you have the position set to top:0; bottom:0;, the top property is conflicted by the bottom property, ultimately positions the divider to the bottom of the page. Simply removing the bottom property prevents the top of the element appearing outside of the viewport:
#something {
width: 97%;
height: 300px;
border: 1px solid red;
position: absolute;
top: 0;
margin: auto;
}
JSFiddle.
I removed the problem in browsers, when i use position: relative to the body element. Now its working in firefox and in other browser too. Live example on http://dev8.newlogic.cz
I have an odd scenario with my CSS, happening in all browsers:
Sometimes, when a new image appears, it displays using the min-width/min-height size specified in my CSS. If I merely resize the browser (drag a corner) the problem goes away and the image properly shows up at the full, correct resolution. In fact, this does not even happen every time. It only happens about 5-10% of the time, when an image is first seen. Eg, if I clear the cache on my browser and then reload, the problem becomes more prevalent.
Here's a picture of the Chrome elements panel, which shows that the min width/height (10px) is being applied instead of the "natural" resolution:
And here's what it actually looks like on the screen:
The border of the image is being applied via my CSS...
.streamifiedPostImageContainer {
margin-top: 5px;
overflow: hidden;
width: 100%;
}
.streamifiedPostImage {
float: left;
margin-right: 8px;
max-width: 100%;
}
.streamifiedPostImage img {
border: 3px solid #FFF;
max-width: 100%;
max-height: 100%;
min-width: 10px;
min-height: 10px;
box-shadow: 0px 1px 8px 1px rgba(0, 0, 0, .3);
}
I've used the elements panel to inspect all the styles. The elements panel shows the "computed" size at 10x10px, yet all of the "Styles" properly match my CSS (above), with no indication why it would be using the min width/height instead of the (proper) image width/height.
Again, the strangest thing is that this fixes itself by merely dragging a corner on the browser or reloading the page. It seems that there is some sort of race condition between the image being cached and the CSS being applied, because it only happens about 5-10% of the time, but it DOES happen on all browsers.