Menu icon Foundation
Visibility classes based on orientation doesn't work

Hi folks,

Even tho I'm on an iPad in landscape orientation, the divs with class show-for-portrait are visible and those with the show-for-landscape class are hidden.

What is the right way to use those orientation-based classes so they work properly?

    							<div class="show-for-landscape small-6 push-6 columns ">
									<h2>TEXT 1</h2>
									<hr id="red-hr">
								</div>
								<div class="show-for-portrait small-10 columns ">
									<h2>TEXT 2</h2>
									<hr id="red-hr">
								</div>

            

         

Am I doing something wrong?? :(

orientationorientation-basedLandscapeportraitvisibilityshow-for-landscapeshow-for-portrait

Hi folks,

Even tho I'm on an iPad in landscape orientation, the divs with class show-for-portrait are visible and those with the show-for-landscape class are hidden.

What is the right way to use those orientation-based classes so they work properly?

    							<div class="show-for-landscape small-6 push-6 columns ">
									<h2>TEXT 1</h2>
									<hr id="red-hr">
								</div>
								<div class="show-for-portrait small-10 columns ">
									<h2>TEXT 2</h2>
									<hr id="red-hr">
								</div>

            

         

Am I doing something wrong?? :(

This post has been closed. No new replies can be added.

Eric Dumensil almost 5 years ago

Find what wasn't working.....

In my viewport meta in the Head, there was height=device-height. Getting rid of that fixed everything!