How To Create Scrollable Elements In Learnworlds | Scrollable Pricing Table Tutorial
Make sure you add the CSS code under the “Dynamic” Section so you can reuse the scrollable elements on all pages. Check the video scene from 6:02 8:32 to for reference.
ul.scroller {
list-style-type:none!important;
font-size:12px;
line-height: 15px;
}
ul.scroller li {
background:#5a5858;
margin:10px 5% 10px 0px;
padding:5px;
color:#fff;
border-radius:5px;
<div class="bwh-in-article-ad">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-client="ca-pub-4299086769596754"
data-ad-slot="8699383760"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
}
.scroller {
margin-top:1em;
display:block;
background: #F1F1F1;
width: 100%;
height: 150px;
overflow-y: scroll;
border: 1px solid #ccc;
} Add the HTML code inside the widget to reflect the scrollable design (scene 4:25 – 6:03)
<div class="bwh-in-article-ad">
<ins class="adsbygoogle"
style="display:block; text-align:center;"
data-ad-client="ca-pub-4299086769596754"
data-ad-slot="8699383760"
data-ad-format="auto"
data-full-width-responsive="true"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>
</div>
<ul class="scroller">
<li>Title 1</li>
<li>Title 2</li>
</ul>I also created other tutorials specifically for Learnworlds, see the relevant blogs below.