Announcement

Collapse
No announcement yet.

One Click For Desktop - One Tap For Mobile - For some this may be an EASY puzzle :)

Collapse
X
 
  • Filter
  • Time
  • Show
Clear All
new posts

    One Click For Desktop - One Tap For Mobile - For some this may be an EASY puzzle :)

    Hiya!

    In the Suivant ReadyTheme,

    I'm hoping to make use of built-in @media queries in order to
    use 2 alternate homepage banners with their own separate links.

    Specifically,
    I'd like Desktop and Laptop users to click a same-size replacement for that Homepage "sfnt_hero" image
    and be directed to our "Contact Us" page. ( It's set up that way right now.)
    ..
    But if someone has found us on a mobile phone, I'd like the Banner
    to change ( so it can say "Tap here to call" or similar ) and use the

    Code:
    <a href="tel:8005551212"><IMG . . . etc. . . . ></a>
    giving them quick access
    to talk to our main store.

    If I understand correctly, I can do this by
    Commenting out:
    Code:
    <!--
    <mvt:item name="readytheme" param="image( 'sfnt_hero' )" />
    -->
    in the Global Header
    And inserting an mvt:item of CONTENT with this:

    Code:
    <div id="big_view">
     <a href="http://www.homesurplus.com/mm5/merchant.mvc?Store_code=homesurplus&Screen=CTUS">
    <img style="border: 0px solid ; width: 1599; height: 799;" alt="Welcome to Home Surplus!" title="Welcome to Home Surplus!"
    src="graphics/00000001/banner_to_show_desktop_viewports.jpg">
    </a>
    </div>
    
    <div id="little_view">
    <a href="tel:8005551212">
    <img style="border: 0px solid ; max-width: 100%; height: auto;" alt="Tap Here to give us a Call!" title="Tap Here to give us a Call!"
    src="graphics/00000001/banner_to_show_mobile_phone_viewports.jpg">
    </a>
    </div>
    Then changing the "structure.css" file
    by adding this at the end:


    Code:
    #little_view {
        display: none;
    }
    
    #big_view {
        display: inline-block;
    }
    
    @media only screen 
        and (max-device-width : 667px) 
        and (orientation : portrait) 
        and (-webkit-min-device-pixel-ratio : 2)
    {
        #little_view {
            display: inline-block;
        }
    
        #big_view {
            display: none;
        }
    }
    Am I close to correct? Or am I asking the wrong question entirely for
    what I need to do?

    Thanks Much in advance to anybody that can keep me from
    blowing up our website! :)
    ..

    #2
    Re: One Click For Desktop - One Tap For Mobile - For some this may be an EASY puzzle

    I tried this method on an independent non-Miva page. It worked for Browser Re-Sizing, but not for mobile phones. Mobile phones displayed the LARGE Div. :(

    Comment


      #3
      Re: One Click For Desktop - One Tap For Mobile - For some this may be an EASY puzzle

      the max width looks like its for landscape, not portrait as you've defined. For example, (and you don't need to be this granular) here's the I6 settings:

      /* Portrait and Landscape */
      @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 667px)
      and (-webkit-min-device-pixel-ratio: 2) {

      }

      /* Portrait */
      @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 667px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: portrait) {

      }

      /* Landscape */
      @media only screen
      and (min-device-width: 375px)
      and (max-device-width: 667px)
      and (-webkit-min-device-pixel-ratio: 2)
      and (orientation: landscape) {

      }
      Bruce Golub
      Phosphor Media - "Your Success is our Business"

      Improve Your Customer Service | Get MORE Customers | Edit CSS/Javascript/HTML Easily | Make Your Site Faster | Get Indexed by Google | Free Modules | Follow Us on Facebook
      phosphormedia.com

      Comment


        #4
        Re: One Click For Desktop - One Tap For Mobile - For some this may be an EASY puzzle

        Thank You!
        I'll give that a try. :)

        Comment

        Working...
        X