Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • #321450

    Quick question. Is there a way for me to have a different set of code/design for desktop, tablet and mobile? The reason why i’m asking about this is because i was thinking of having some items appear on desktop and tablet view but not necessarily appear on mobile. Good example is a phone number. In desktop, it makes sense to render the phone number as numbers whereas in phone, i want it to display as a button where when clicked, it would launch the user’s phone dial pad so they can directly call the number. Same goes with an email address.

    Thanks!
    mike

    #322152

    Hi Mike!

    Yes, that’s possible with the use of custom CSS and media queries, for example for the phone request, try putting something like this in the phone field (theme options):

    <span class='phone_desktop'>323223</span><a class='phone_mobile' href='tel:323223'>323223</a>
    

    Then add this to Quick CSS:

    .phone_mobile{ display: none; }
    @media only screen and (max-width: 767px) {
    .phone_mobile{ display: inline-block; }
    .phone_desktop{ display: none; }
    }

    Regards,
    Josue

Viewing 2 posts - 1 through 2 (of 2 total)
  • You must be logged in to reply to this topic.