Show / Hide button using code supplied

[theremotedr]

Hi,
This afternoon been trying to get my head around media queries.

I have this code shown below.

/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
#modal-image {
	max-width: 95%;
	max-height: 95%;
	margin-left: auto;
    margin-right: auto;
	background: linear-gradient( to bottom, #666, #000 );
}
#closure{
    display: none;

}
}

My goal is to SHOW the closure button when in Portrait mode BUT when in Landscape mode have it HIDDEN.

The code above hides it both in PORTRAIT & LANDSCAPE & i cant work out how to apply it to LANDSCAPE only

Thanks

[coothead]

Hi there theremotedr,

why would you want that?

coothead

[theremotedr]

This is the css.

/* For iPhone 6 and 6 plus Portrait or Landscape View */
@media (min-device-height: 667px) and (min-device-width: 375px)
and (-webkit-min-device-pixel-ratio: 3) {
#modal-image {
	max-width: 95%;
	margin-left: auto;
    margin-right: auto;
    height: auto;;
	background: linear-gradient( to bottom, #666, #000 );
}
}

When viewing on my phone in portrait all is fine & i can click the close button once finished.

When viewing on my phone in landscape the close button forces the image down & off the screen.
With the close button hidden etc the image is the perfect size for my screen.

I then just rotate my phone to Portrait THEN click on the close button.

So CLOSE button to be shown in Portrait BUT HIDDEN in Landscape.

I believe i am then finished

[coothead]

Hi there thrremotedr,

it seems that you might have missed this post of mine here...

Responsive webpage advice - post #9

...which would. to my mind, make the hiding of the button unnecessary.

Of course, having five different threads for the same object does make
things rather confusing.

coothead

[theremotedr]

Many thanks now applied

[aliyahmehmood]

If media queries work on desktop and not on mobile devices, then you most likely haven't set the viewport and default zoom. Note: You only need to add one of the code lines above, and usually, the first one does the job.

[coothead]

...then you most likely haven't set the viewport...

...and you most likely could not be bothered to check the
original poster's code to see if your assertion was correct.

coothead