Desktop view
First, you will generate one widget for the desktop view. The image below shows the settings I did use for the tests:Mobile view
Second, you will generate another widget for the mobile view. The image below shows the settings I did use for the tests:
Note: I did use random HOVER EFFECTS on both widgets just for test purposes, you can change them to your taste.
Placing the codes
- Copy the code on the white box below and paste on an HTML/Javascript widget
- Replace the lilac text with the snapwidget you did generate first, the one for the desktop view.
- Replace the orange text with the snapwidget you did generate later, the one for the mobile view.
<!-- SnapWidget desktop--> <div class='snapwidget-desktop'> <!-- SnapWidget--> <script src="https://snapwidget.com/js/snapwidget.js"></script> <iframe src="https://snapwidget.com/embed/904778" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe> </div> <!-- SnapWidget mobile--> <div class='snapwidget-mobile'> <!-- SnapWidget --> <script src="https://snapwidget.com/js/snapwidget.js"></script> <iframe src="https://snapwidget.com/embed/904779" class="snapwidget-widget" allowtransparency="true" frameborder="0" scrolling="no" style="border:none; overflow:hidden; width:100%; "></iframe> </div> <!-- SnapWidget CSS --> <style> .snapwidget-mobile { display: none; } @media screen and (max-width: 50em) { .snapwidget-mobile { display: block; } .snapwidget-desktop { display: none; } } </style>