Viewport meta tags disappear when 'Use layout's stylesheet(s)' is unchecked

[tickletheory]

Hi, I'm encountering a baffling but frustrating problem.

I'm using Custom CSS and I always uncheck Use layout's stylesheet(s) when styling layouts to avoid duplicating css. I've tried this on a few themes, and every time I do this, the meta tag for responsive mobile disappears.

<meta name="viewport" content="width=device-width, initial-scale=1.0"/>

just stops being rendered in the HTML.

Is there any way to put this back whenever I use custom CSS, without keeping Use layout's stylesheet(s) checked?

Comments

[momijizukamori]

Not without editing the layer S2 code, probably. Buuut that should probably not be happening (because it's... not actually CSS), so I will dig in and see about fixing that

[tickletheory]

Thank you!

Yeah, I thought it was really bizzare.

[momijizukamori]

The note in the code explaining that says 'they're using their own stylesheets which probably won't work with the initial scale (things will just look smooshed together)' which might be a problem, but that code is also five years old now and I think mobile browsers have gotten better about not going totally nuts on scale things so it's worth looking into again.

[tickletheory]

Thank you for the time helping me look these things up!

I'll continue to use the base styles for now, but they're not compressed so it really doubles the bytes needed to load the CSS. I hope the team could look into it and add the viewport tag back. I'd like to contribute to the community by making good design accessible to more people. :)

[momijizukamori]

You're welcome! The fix is pretty quick and I know we're hoping to do a code push soonish so as long as it doesn't make things go totally wonky, we're good. And to answer your pre-edit question - it's possible with a free account, but it's kind of fiddly and tedious, so unless you're really frustrated, or want to dig into more of the guts of the style system, I don't recommend it. I'd like to make it easier at some point, but I've got a few other big projects on my plate, so I'm not sure when it's going to happen.

[tickletheory]

Absolutely understand! For npw I'll work with how things work currently, and will wait until the viewport fix is pushed live. Thanks again :)

[carisma_sensei]

Sorry to butt in, but you can't really make the layout mobile responsive without editing layers right? I create lots of layouts and they look alright on mobile, although they don't have the mobile view. But I really don't want to mess with layers so I'm ok with it.

More and more people use mobile phones to browse sites lately, so it's a bit of a downside when designing. But honestly, if it's not an easy task and one that anyone with a free account can do (even though I have paid time), then I'm off that boat hahaha. If I was a dev obviously I wouldn't, but being a hobby, it puts me off.

That being said, you all know so much and you rock. I'm just a coding baby even though I started back in 2006 hahaha. I admire you all ♥

[momijizukamori]

I thiiiink you can add media query stuff in the custom CSS field? That can do a lot of the reflow stuff at different sizes (though I've learned the hard way that most mobile phones are like retina displays - the reported resolution is really high, but they translate multiple physical pixels into a single 'display' pixel). The viewport meta tag sets some basic scaling stuff for mobile browsers though, and right now it's not possible to add that without editing layers or leaving 'use layout stylesheet' checked - it's possible to use custom layers on a free account, but the system is kind of a fiddly pain in the butt so I don't recommend it unless you're interested in getting into the guts of the system

(that said, if you are, hit me up, I have resources!)

[syntheid]

Media queries definitely work in the custom CSS field, so you can make a responsive layout that way, though it requires fiddling to make sure things like fonts stay at readable sizes and whatnot.

Which I just went in to make edits to the controlstrip on my personal layout for, actually-- were there already plans to revamp that to be more usable for mobile? (If not, I could try to take a stab at it-- I was thinking it might make more sense to convert it to a flyout menu, which would be familiar for modern website users.)

[momijizukamori]

Good to know! I don't do DW on mobile much so I'm a little less aware of that stuff.

solarbird had started a project to make the navstrip more mobile-friendly, which has a good chance of getting merged when it's farther along. The navstrip is tricky though because it's an accessibility feature for many users (because of the quick access to 'view in light'/'view in my style') so we have to be very sure it stays accessible at a site level.

[tickletheory]

Yay sounds exciting! Looking forward to the updates.

[marahmarie]

Just want to confirm I've had this problem too, and had to add viewport meta tags to custom s2 to work around it. I wrote about it here in early 2018 (flash on page load as talked about there is another thing; with Use Layout's Stylesheets kept checked, the user's overrides fill the page before the layout's stylesheet does).

[momijizukamori]

Ooh, thanks for the additional details!