What's your biggest current challenge? Have your say in Community Polls along the right column.

Re: Am I going crazy or was '--viewport-height' removed from Dawn?

Am I going crazy or was '--viewport-height' removed from Dawn?

Danh11
Shopify Partner
87 2 40

I started building out a site about a month ago and I was modifying the Dawn theme. I found a function in global.js that set a viewport height property using window.innerHeight. It was used multiple times in stylesheets. 

 

function  viewportHeight() {
  const doc = document.documentElement;
  doc.style.setProperty('--viewport-height', `${window.innerHeight}px`);
}
window.addEventListener('resize', viewportHeight);
viewportHeight();

 

I've started another site and went to use that variable but it's not there. The function isn't there and there's no reference to it online. Now I'm not sure if I wrote it myself and completely forgot that I did it, but that wouldn't explain it being used throughout various stylesheets. So I'm sure it was a thing, but tbh I really don't know now.

So now I'd like to know if it was removed for a particular reason (if it was a thing) before I throw it back in and start using it. 

I'm so confused.

Replies 2 (2)

PaulNewton
Shopify Partner
7481 660 1570

 

  1. Be sure global.js was part of the themes assets and not from an app or changed by an app
  2. Compare theme versions.
  3. Search the repo for changes https://github.com/Shopify/dawn

Contact paull.newton+shopifyforum@gmail.com for the solutions you need


Save time & money ,Ask Questions The Smart Way


Problem Solved? ✔Accept and Like solutions to help future merchants

Answers powered by coffee Thank Paul with a Coffee for more answers or donate to eff.org


Danh11
Shopify Partner
87 2 40

I had a look in the first commit of the repo for the Dawn theme I initialised. I've actually found the '--viewport-height' being set in the MenuDrawer class in global.js. It's checking if the platform is an iPhone, and then setting the property for stylesheets to reference. It's actually pretty neat.

My confusion must have been when I added the function myself (not knowing it already catered for it), and then seeing references to the property afterwards and being confused as parts of the base stylesheet were referencing the exact property I was setting, therefore getting confused if I actually did add the function myself. lol.

 

Thanks for the reply anyway.