Comments (7)
Seems to be an iOS issue as I said, ported from Miligram ( milligram/milligram#136 ).
My fix was replacing the rem
to px
as below:
@media screen and (max-width: 639px) {
.row {
flex-direction: column;
}
.column, .columns {
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
}
}
Edit:
You can change the min-width: 40rem
to 45rem
but do some testing on iOS simulator ;)
from sscaffold-css.
Hmm. Can you post a small example with this behavior? I'll add it to the CBT tests and figure out what's going on.
from sscaffold-css.
This is the preview on chrome using responsive mode iPhone 8 Plus:
Basically it's div.container.row
with styles being .container { max-width: 100rem; margin: 0 auto; }
and inside I have div.column > iframe
(also tried with div.seven.columns
but nothing changes) and another div.five.columns > p
(no custom stylings on .column
/ .columns
.
For me it seems that the grid sizing is tied to the ppi
of the screen instead of the actual resolution, or maybe it's a particular bug with iOS.
from sscaffold-css.
@robsheldon could you test it on Android or you had this behavior before?
from sscaffold-css.
I hadn't seen this behavior in previous device tests. I suspect there's some combination of html and the css that's causing this. I need to figure out the html part. I'll make time for it tomorrow at the latest.
from sscaffold-css.
@robsheldon to me it's an @media issue, more specifically @media (min-width: 40rem)
the .row
and .column
being handled.
Even the official website has the same (bugged) behavior.
Real iPhone 8 Plus (tried Safari, Chrome, etc):
from sscaffold-css.
Thank you for doing so much leg-work on this issue. I do want to fix it, my hang-up has been on finding the right approach for it.
The media queries are given in rem units to help improve support for environments with scaled displays -- some people with poor eyesight may have browser options set to scale things and using rems supports that better than px.
I'm reluctant to just bump the max-width on that media selector from 40 to 45rem because there are still going to be a handful of handheld devices with this behavior.
I think the right thing to do is to switch to using device-width and pixels, but that's not a change I want to make in a point update.
So, I'm going to do a bugfix release for the other two bugs that have been reported, and then see if changing up the media queries is going to break anything. If not, I'll do a minor release with that fix.
from sscaffold-css.
Related Issues (11)
- Add minified css file? HOT 3
- Missing and in media queries HOT 1
- Switch to modern-normalize
- Normalize <dialog> elements
- Is there a way to have in-flow children that wrap to the next line if there are too many? HOT 2
- Text size in uncomfortably large by-default HOT 9
- Add accessibility testing HOT 1
- Publish on npm/bower? HOT 6
- Consideration for System-UI font stack vs. reliance on Google Montserrat HOT 2
- Select's chevron/arrow not working on minified version HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from sscaffold-css.