Support Forums for LiveMesh Themes & Plugins › Forums › Appdev Theme Support › Feature pointers on mobile › Reply To: Feature pointers on mobile
November 3, 2013 at 1:09 pm
#2573
Keymaster
It’s quite easy to display feature pointers in mobile (just one line CSS) but a bit involved to get them pointed to the right place in the screenshot in all resolutions. Here is a sample markup which you can use for making the feature pointers to show up in mobile. Pls change the top and left values of img files to suit your needs –
/* Tablets */ @media only screen and (max-width: 959px) { #featured-app #feature-pointers img { display: block; } #feature-pointers img.feature1 { top: 462px; left: 300px; } #feature-pointers img.feature2 { top: 560px; left: 10px; } #feature-pointers img.feature3 { top: 800px; left: 290px; } #feature-pointers img.feature4 { top: 710px; left: 10px; } } /* Smartphone landscape mode */ @media only screen and (max-width: 479px) { #feature-pointers img.feature1 { top: 462px; left: 300px; } #feature-pointers img.feature2 { top: 560px; left: 10px; } #feature-pointers img.feature3 { top: 800px; left: 290px; } #feature-pointers img.feature4 { top: 710px; left: 10px; } } /* Smartphone portrait mode */ @media only screen and (max-width: 320px) { #feature-pointers img.feature1 { top: 462px; left: 300px; } #feature-pointers img.feature2 { top: 560px; left: 10px; } #feature-pointers img.feature3 { top: 800px; left: 290px; } #feature-pointers img.feature4 { top: 710px; left: 10px; } }