Hey!
So I built a small example using Bootstrap to better understand how column classes and the Grid System work and something doesn’t add up.
As far as I understand, if I use a “xs” screen (a phone, for example) my column should cover 12 columns out of 12. Instead, it appears to be covering 6 columns. Since I’m using the “col-md-6” class, that should happen on wider screens only.
Basically, the “col-12” class appears to be ignored. Why does that happen?
I’m not sure if you’ve already fixed it, but when I narrow the browser window (or the preview window in codepen), it’s one blue rectangle spanning 12 columns for small screens. At 768px, the rectangle takes up 6 columns, making space to show the green background left and right. At 992px, it takes up 4 columns. Which is exactly what should happen when you apply col-12 col-md-6 col-lg-4.
Hello! Thanks for answering.
My bad. It appears to work in the editor view, but if you switch to the debug view, which is a plain version with no CodePen iframe added, it doesn’t.
I also tested it on GitHub pages because I suspected it had something to do with CodePen, but nope
I’ve tried that link in both FireFox and Chrome, and the behaviour is exactly what you’d expect. 12 columns on small screens. Which browser are you using and is it up to date?
EDIT Wait I see what you’re referring to, it looks like it’s not working in Chrome’s mobile preview. The switch from 3-6-3 to 4-4-4 columns at 992px width is working, but the 12-column-width is indeed ignored. Odd.
Oh really? Dang! Mine looks like this
And it looks the same when I open the page in my phone.
EDIT: Exactly! I really don’t know what’s wrong.
Yeah same for me. I see you’re not really using bootstrap, but something called bootstrap-grid, which I’ve never heard of, and the latest commit in the github repo is from 5 years ago. Have you tried switching to an up-to-date version of bootstrap?
Am I? I thought I was using twitter-bootstrap, as it says here
Where did you see this “bootstrap-grid”? Sorry if it’s a silly question.
EDIT: It was under JS. I removed it but, apparently, nothing changed. Good call though.
I don’t really know how to help, that debug view you shared has expired.
Oh, ok. Thanks for trying. What do you mean “expired”? I can still see it.
It gives me a 403 error:
I’ve never used the debug view in codepen, and apparently that’s the only place where the code isn’t working as expected. Have you tried setting up a local project in your editor instead, and checked if the problem still persists in Chrome’s mobile preview?
Hm. Weird.
Well, I did export the project from Codepen and deployed it to GitHub Pages here, but it’s doing the same thing.
I checked the code and I don’t see anything unusual.
Here’s the repo, in case you want to check it out.
That’s a really weird bug. First of all, one would expect that if bootstrap’s col-12 class doesn’t work for mobile screens, you’d find something like an opened issue on google, that was very soon closed and resolved after that.
If you check the developer tools and open the github page you’ve linked with Chrome, and compare the mobile preview and the normal preview, you can see that in the mobile preview, there’s still a style rule applied that sets the max-width of the column to 50% in a media query:
Which makes no sense to me because the width of the page is clearly 400px. But if you disable those rules, the one below for .col-12 become active again and set the correct width.
I’m absolutely clueless, so maybe we’ll have to wait for another pair of eyes to check this out.
Yes exactly! It’s using “col-md” instead of “col” when it clearly shouldn’t.
We’ll see if someone else can give us a hint. Thanks a lot for trying!
I didn’t read all of the thread yet, but are we just talking about the device mode here?
If so try adding the meta tag to the head (Settings > HTML > click the button “↑ Insert the most common viewport meta tag”).
<meta name="viewport" content="width=device-width, initial-scale=1">
Edit: The viewport meta tag is also missing from your GitHub page so that would be affected as well. Just add the meta tag to the head and the device mode should work there as well.
Thanks! That was it!
I have no idea how these things work. I’ll have to give it a read.
Good to hear.
Can’t say I know the internals of how device mode works, I just know it needs the tag from experience. In any case, you should always add the viewport meta tag, it’s not just about the device mode but mobile devices in general.
Good to know! I really never knew that. I’d also tried the website directly on my phone and wasn’t working either!
Thanks @RedToucan for this thread, my mind was always a bit fuzzy about why exactly I’m including this tag in all my pages by default.
@RedToucan, in codepen the debug view is only for you, the logged in user. It cannot be shared with others.
This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.