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; }
}