Viewing 2 posts - 1 through 2 (of 2 total)
  • Author
    Posts
  • September 18, 2014 at 8:23 pm #321450
    nbfc

    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

    September 19, 2014 at 11:34 pm #322152
    Josue

    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

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