No width on my grid
This works on a desktop/laptop but on mobile IOS / chrome it has no width, why? https://jsfiddle.net/qd4gboj8/1/
Edit fiddle - JSFiddle - Code Playground
Test your JavaScript, CSS, HTML or CoffeeScript online with JSFiddle code editor.
20 Replies
Both container-type and subgrid are very new features. If you want wide compatibility, neither of those should be used.
container-type and CSS subgrid are both supported by all major browsers, so that's not an issue:
- https://caniuse.com/?search=subgrid
- https://caniuse.com/?search=container-type
I don't understand the question, though. For me, it renders the same on both desktop and mobile. All the widths are set to 100%. I need to read MDN some more to fully understand your grid-template-columns, but I think it won't allow the columns to be less than 220px wide and it's forced to wrap. So, on a narrow screen, it only fits one column.Yeah I don’t think either of those are an issue
Actually if the issues was grid-template-columns it wouldn’t work on desktop under dev tools responsive mode. It’s only on a mobile.
Code taken from here: https://youtu.be/Zddz_R1RnfM?si=rWk3E6J_syRYZPyh
Kevin Powell
YouTube
Subgrid & Container Queries change how we can create layouts
https://kevinpowell.co/courses?utm_campaign=general&utm_source=youtube&utm_medium=containersubgrid 👈 Looking to get better at CSS? I’ve got a range of courses, including several free ones!
Container queries and subgrid are now both supported in all evergreen browsers, which is super exciting, and as a bonus, they can work really well together! ...
I didn't use dev tools. I used my Google Pixel 5. I double-checked Chrome's version number, too: 119.
I had to copy the code over to CodePen, first. Then the URL I loaded on my phone was the "debug" view.
Here's a codepen - does not work on mobile. https://codepen.io/kodee/pen/OJdpezJ
It works for me on: (all latest versions)
Android - Samsung Browser
Android - Chrome
Android - FireFox
Can not test on iOS
I have the same results as MarkBoots, but I have screenshots. The website renders the same on desktop and mobile. You still haven't explained what you mean by "no width" and "does not work".
Thanks, so something on IOS on either, chrome, safari or edge
Sorry, I thought the file names would come through. I have screenshots with the CodePen Panels, wide and narrow, screenshots with CodePen's full page view, wide and narrow, and a screenshot from my phone. It renders the same everywhere.
It’s only when I’m on my phone. Making code pen narrow on a full screen system it works. iPhone it doesn’t. Current version is Google Chrome 119.0.6045.109 (Official Build) stable (64-bit
I don't know what to tell you. Since Mark and I both got the same results, I'd say that something is wrong on your phone. You could try clearing the app's data and restarting the phone.
All browsers on iOS use Safari's rendering engine, so the browser version doesn't matter as much there. I think Safari supports all the CSS features you're using, though.
Question, does anything else work for you? Now we are testing some recent features, but maybe something else is wrong. Clear the pen and only put some text there. Does it show up? Maybe the iframe gets blocked
https://vaggrippino.github.io/NZAA/
This took less time than we've already spent switching back and forth between JSFiddle and CodePen. If it doesn't work here, there's definitely something wrong with your phone or maybe iOS Webkit.
Got a friends iPhone and it works. So what’s up with my phone?!? How can I troubleshoot it
The generic troubleshooting instructions are to close the tab, clear the cache and cookies, and reboot the device before trying again. I'm not an iPhone user, so I can't be more specific than that, but google is your friend 😅
I’ve cleared my data, closed browser, restarted phone reset network settings nothing will fix this!! If it effects me will it effect other people?
ask them. send the link that @VinceAggrippino made to people you know with iOS
How do I ask users that I don’t yet have? I’m talking about users who’ll find my site via google searches etc