Update LTW shortcode media queries

[joshdarby]

Changes

This pull request makes the following changes:

• Updates the min and max width media queries for the LTW shortcode stylings from 771px and 770px to 981px and 980px

Before on iPhone X:

After on iPhone X:

Why

For #162

Testing/Questions

Features that this PR affects:

• Mobile version of LTW shortcode

Questions that need to be answered before merging:

• Is this PR targeting the correct branch in this repository?
• Is this new target size for the media queries ok?

Steps to test this PR:

1. View a page with the LTW shortcode and make sure the mobile version works as expected

[benlk]

Chrome, with device emulation set to "Nexus 5X", which is an older Android phone:

[joshdarby]

@benlk Hm, I wonder if that's from the image? Here's how Nexus 5X looks for me

[joshdarby]

Still looks normal to me when adding the image used on prod 😕

[benlk]

Both our zoom levels look the same: way too zoomed-out for this content, even after removing the Media and Text block at the top of the page:

Switching from the "Local That Works" template to "Full Width Page" gives me this:

[joshdarby]

@benlk Does adding width: 100% to .current-ltw-shortcode fix the issue for you?

[benlk]

No:

I think we're missing a meta value somewhere that sets the screen scaling.

[joshdarby]

@benlk Oh wow, you're right. We're missing <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

[benlk]

That's part of Largo's header.php, which template-page-ltw.php misses because we're making a custom header rather than use get_header(). What else might we be missing from that file?

[joshdarby]

@benlk e822825 reverts the previous media query updates and a306b81 adds in all of the missing meta tags and other header functions that we were missing

[benlk]

With the Local That Works template: