Can I redirect small mobile device users

pileofprintspileofprints Registered Users Posts: 36 Big grins
edited October 24, 2013 in SmugMug Customization
MY New Smugmug template, even after considerable customization, works great on iPhones. This achievement of smugmug fills me with delight. :clap


Then I went ahead and hacked an opening splash page that does not work so great on iPhones!!??! I used Lamah's randomly loading background to make my site not be the same every time one goes back to it. I've gotten great feedback about this-- except from iPhone users.

Can I just direct users of small hand-held devices to my "highlights" page which is the original home page from the template. Thanks

http://www.pileofprints.com/

Comments

  • thenickdudethenickdude Registered Users Posts: 1,302 Major grins
    edited October 24, 2013
    You can't automatically redirect people, but you can display a link for iPhone users to click instead of the random background block. In the CSS for the random background HTML block, add this code:
    @media only screen and (max-width: 640px) {
      > div {
        display: none !important;
      }
    }
    

    That'll hide the random background when the window is skinny (like on a phone). Now add a new HTML block which is the content to show for your mobile visitors, e.g. with this HTML:
    <a href="http://www.pileofprints.com/Browse">Click here to enter the site!</a>
    

    And add this CSS on the CSS tab:
    > div {
        display: none !important;
    }
    @media only screen and (max-width: 640px) {
      > div {
        display: block !important;
      }
    }
    
    a {
      display: block;
      text-align: center;
      font-size: 200%;
    }
    

    Note: you'll need to resize your browser window to the right width in the customiser to see your HTML block after you add this CSS to it (skinny for the mobile version, wide for the desktop version).
Sign In or Register to comment.