Semantic-UI is not getting responsive in mobile

Created on 7 Oct 2015 · 8Comments · Source: Semantic-Org/Semantic-UI

Hello, actually I have a doubt.
I'm using Semantic-UI in Meteor.
My application has a => div class="ui two column grid stackable container"
In the browser works correctly when I reduce the size of Desktop to Mobile or Tablet.
However when I open the application in a real Mobile, such as an iPhone 4 or an Asus Zenfone 2, the application continues to show in two columns, just like the Desktop, when in fact it should be in one column.
Am I doing something wrong?

Needs Test Case Should Post to Forum - See Readme

Source

marcuslma

Most helpful comment

I have had the same issue I believe.
Semantic UI is so great at making the developers that are coming from the back-end background like myself good at creating beautiful interfaces.
Unfortunately, since I am relatively new to mobile (-first) development, I forgot to include the viewport meta tag.
No matter how wide or narrow I made my Chrome mobile preview, the segments would not stack. My text appeared considerably smaller than I anticipated too.
Adding
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">
to my <head> tag completely solved the issue.
Thanks for doing such an awesome job!

alexpanov on 5 Dec 2016

👍44 ❤3 🎉2

All 8 comments

do you have a reproduction somewhere?
could this be related to <meta viewport> settings in your html <head>?

jholl on 9 Oct 2015

❤8 👍6

I'm not sure if this is the exact same issue you're facing, but:

My website is built on meteor+semantic-ui. It responds correctly to desktop media queries, but not when I'm using my Galaxy s3 browser. An online viewport tester says my screen width is 360px, but I believe that my website is using the full pixel resolution of 720px (resolution vs device-width). So it never becomes small enough to be stackable and instead stays in 2 columns.

Edit: I can't test right now, but it seems like Meteor doesn't add any meta tag for viewport. Perhaps adding that to the head manually would fix it?

Edit2: Yup adding a meta-viewport tag fixed the problem. Is this something the meteor-semantic-ui package should handle automatically?

Ligerx on 10 Oct 2015

Hi!
Add the meta tag fixed the problem, thank you jholl.
However, as Ligerx asked, the package should handle this automatically?

marcuslma on 11 Oct 2015

👍2 🎉1

Probably not going to get head meta viewport added by default to either project; it's app case by case.

You might have luck getting a note added to the semantic docs in the getting started or templates section - but i haven't checked if it already exists.

jholl on 11 Oct 2015