Menu icon Foundation
npm run build adds display:none!important

The following html compiles correctly with 'npm start',  but when compiling with with 'npm run build' the hide-for-large content gets a display:none!important; added to it's element.style so the hide-for-large content isn't displaying on small screens.

***Source***

 

 

<!-- >596px -->

		<row class="show-for-large">

		  <columns large="3" >

			<img src="http://via.placeholder.com/140x140" alt="@line.Product.Name">

		  </columns>

		  <columns large="3" >

			<h3>{Product Name}</h3>

			<p><strong>Code: </strong></p>

		  </columns>

		  <columns large="3">

			<h3><strong>Price: </strong></h3>

			<p><strong>Quantity: </strong></p>

		  </columns>

		  <columns large="3" >

			<h3><strong>Total: </strong></h3>

		  </columns>

		</row>

		<!-- <596px -->

		<row class="hide-for-large">

		  <columns small="6">

			<img src="http://via.placeholder.com/140x140" alt="@line.Product.Name">

		  </columns>

		  <columns small="6">

			<h3>@line.Product.Name sml</h3>

			<p><strong>Code: </strong></p>

			<h3><strong>Price: </strong></h3>

			<p><strong>Quantity: </strong></p>

			<h3><strong>Total: </strong></h3>

		  </columns>

		</row> 

email hide-for-large

The following html compiles correctly with 'npm start',  but when compiling with with 'npm run build' the hide-for-large content gets a display:none!important; added to it's element.style so the hide-for-large content isn't displaying on small screens.

***Source***

 

 

<!-- >596px -->

		<row class="show-for-large">

		  <columns large="3" >

			<img src="http://via.placeholder.com/140x140" alt="@line.Product.Name">

		  </columns>

		  <columns large="3" >

			<h3>{Product Name}</h3>

			<p><strong>Code: </strong></p>

		  </columns>

		  <columns large="3">

			<h3><strong>Price: </strong></h3>

			<p><strong>Quantity: </strong></p>

		  </columns>

		  <columns large="3" >

			<h3><strong>Total: </strong></h3>

		  </columns>

		</row>

		<!-- <596px -->

		<row class="hide-for-large">

		  <columns small="6">

			<img src="http://via.placeholder.com/140x140" alt="@line.Product.Name">

		  </columns>

		  <columns small="6">

			<h3>@line.Product.Name sml</h3>

			<p><strong>Code: </strong></p>

			<h3><strong>Price: </strong></h3>

			<p><strong>Quantity: </strong></p>

			<h3><strong>Total: </strong></h3>

		  </columns>

		</row> 
Kevin about 2 years ago

I have the same problem. 

 

If I run npm start, the show for large and hide for large classes work, if I run build they do not which is super inconvenient when I need to use build for my production level emails. 

 

 

Please help!!!

Jared Bartlett over 1 year ago

npm run build adds an inline display:none !important; to the table and then tries to override it in the @media which - doesn't work. This is a pretty big problem. To not have any response from Zurb on this issue for 10 months and not have it fixed when it should be a relatively simple fix is pretty lousy. I think I'm going to write my own show/hide media query and use that instead.

Jared Bartlett 11 months ago

This really has nothing to do with NPM and is more about the inky/inlining aspect of FOUNDATION>your response is not very helpful. If you thought I somehow got this far without knowing what npm is...