Results 1 to 7 of 7

Thread: Show / Hide button using code supplied

  1. #1
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default Show / Hide button using code supplied

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

    I have this code shown below.

    Code:
    /* 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

  2. #2
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,268
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Hi there theremotedr,

    why would you want that?

    coothead
    ~ the original bald headed old fart ~

  3. #3
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    This is the css.

    Code:
    /* 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

  4. #4
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,268
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    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
    ~ the original bald headed old fart ~

  5. #5
    Join Date
    Nov 2011
    Location
    Cider Region
    Posts
    1,243
    Thanks
    163
    Thanked 3 Times in 3 Posts

    Default

    Many thanks now applied

  6. #6
    Join Date
    Jun 2022
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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.

  7. #7
    Join Date
    Nov 2006
    Location
    chertsey, a small town 25 miles south west of london, england.
    Posts
    2,268
    Thanks
    3
    Thanked 284 Times in 277 Posts

    Default

    Quote Originally Posted by aliyahmehmood
    ...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
    ~ the original bald headed old fart ~

Similar Threads

  1. Replies: 5
    Last Post: 03-05-2017, 12:58 PM
  2. Show/Hide the 'x' button on the modal window based on our needs?
    By kmantrip in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 06-12-2014, 05:24 PM
  3. Replies: 1
    Last Post: 02-24-2012, 03:59 AM
  4. Replies: 14
    Last Post: 10-23-2011, 12:53 AM
  5. Show/Hide code help
    By wakrah in forum JavaScript
    Replies: 3
    Last Post: 12-22-2009, 05:38 PM

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •