etsy

Snapwidget for mobile

It was not possible to use css to adjust a single snapwidget to look better on the mobile view, so I had to came up with this solution: you will have to generate two snapwidgets.
You can check the result here on this test blog.


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