etsy

Snapwidget for mobile

It is not possible to use CSS to adjust a snapwidget widget to look better on the mobile view, so we have to use a more creative solution: generate two snapwidget codes.


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

  1. Copy the code on the white box below and paste on an HTML/Javascript widget
  2. Replace the lilac text with the snapwidget you did generate first, the one for the desktop view.
  3. 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>

Contact Form