I have a very, very basic TNEW skin, which is working well enough responsively. But rest of our Test site is not: if I have it in a desktop browser window, and shrink the window, then the TNEW elements behave appropriately: things stack, vanish, etc. But on a mobile device they do not. Does anyone know why that might be happening?
When I've seen this it's because I'm missing a meta viewport tag. Try adding this to your header:
<meta name="viewport" content="width=device-width, initial-scale=1">
Chris Szalaj Is this something I should try, or might it conflict with however TNEW wants the meta tags to be?
Hi Gawain, you can go ahead and include a meta viewport tag in your template's head. There shouldn't be a conflict as TNEW leaves this one up to the template. If you don't have any special requirements for your viewport, I'd recommend going with what Nick suggested:
Hmm. That, unfortunately, makes my template styles go haywire (with the meta tag on left):
I should say the example on the left is _not_ pulling in any TNEW code, it's just the raw template file.
Here is the relevant CSS on my side that is now "over inflated". Basically, I have two media query rules: one to make the header/footer responsive to browser size changes, the other to respond to being on a device with a small screen:
@media screen and (max-width: 640px) { div#tickets_title { font-size: 1.5em; } div#tickets_footer { font-size: 1.5em; } div.tickets_title_link { float: none; } div#copyright_contact { width: 100%; text-align: center; } div#ucb_logo { text-align: center; } } @media screen and (max-device-width: 640px) { div#tickets_title { font-size: 2em; } div#tickets_footer { font-size: 2em; } div.tickets_title_link { float: none; } div#copyright_contact { width: 100%; text-align: center; } div#ucb_logo { text-align: center; } }
It's always possible that something is just misconfigured in our v7 setup for this site, but our other site, which is currently white-label v7 in QA is _not_ having this problem, so that does suggest some kind of CSS conflict. Do media queries conflict with each other, outside of what elements (classes and ids) are defined within them?