Whale Slider HTML

Permalink Browser Info Environment
Is it possible to use HTML for the text in the Whale Slider? This is possible in the OWL Slider. I would like to make a list. See attachments for example (1. how it is now) (2. how I want it).

I would love to hear from you.

2 Attachments

Type: Pre-Sale
Status: Resolved
View Replies:
shahroq replied on at Permalink Reply
It shouldn't be a problem. Add something like this in slide desription field should generate what you intend to do:
<ul class='iconlist fa-check'>
    <li>Item 1</li>
    <li>Item 2</li>

For checking list of available icons check here:
rheveling replied on at Permalink Reply 1 Attachment
Thanks! It worked. However, everything looks good and neat on the PC, but not on a mobile phone (see attachment). Do you have a code so that the text is also neatly aligned on the mobile phone?

see attachment
shahroq replied on at Permalink Reply
There are lots of text in one slider, and it's not enough space to house them. You could either skip some of the words or use smaller font-size.
If you decided to go with the latter option, this piece could be applied in your `custom.dev.less` file:

/* sample code for implementing media queries */
@media only screen and (max-width: 1199px) {}
@media only screen and (min-width: 992px) and (max-width: 1199px) {}
@media only screen and (max-width: 991px) {}
@media only screen and (min-width: 768px) and (max-width: 991px) {}
@media only screen and (max-width: 767px) {}
@media (min-width: 480px) and (max-width: 767px) {}
@media only screen and (max-width: 479px) {}
@media only screen and (max-width: 479px),
    .slider-caption {
        h1, h2, h3, h4, h5, h6 {
            font-size: 10px!important;

And you can use it for any of the media queries in the comment area to define different font size in different devices.
PS: If you don't know how to use custom.dev.less file, check `Instructions` Page #18.
qonnected replied on at Permalink Reply 2 Attachments
How can this be solved for the mobile phone? The result is good on the computer, but not on mobile phones and tablets. See screenshot.
I am using the following code.

<ul class="fa-ul">
   <li><span class="fa-li"><i class="fa fa-check" style="color:#f6a500;"></i></span>Razendsnel glasvezel internet</li>
   <li><span class="fa-li"><i class="fa fa-check" style="color:#f6a500;"></i></span>Iedereen tegelijk online zonder haperingen</li>
   <li><span class="fa-li"><i class="fa fa-check" style="color:#f6a500;"></i></span>Gratis FOX Sports Eredivisie 1, 2 en 3</li>
qonnected replied on at Permalink Reply
Would you please respond?
shahroq replied on at Permalink Reply
Your case is no different than what I answered before in this topic. Yet I updated my last answer with practical code as to how to change font-size in case you are not comfortable with CSS.
qonnected replied on at Permalink Reply
Thanks! With this code, and some adjustments, its worked.

concrete5 Environment Information

# concrete5 Version
Core Version - 8.5.1
Version Installed - 8.5.1
Database Version - 20190301133300

# concrete5 Packages
Bootstrap Blocks (0.9.7), Pixel Theme (2.3.0), Whale Sky Tabs (1.3.0)

Browser User-Agent String

Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/76.0.3809.100 Safari/537.36

Hide Post Content

This will replace the post content with the message: "Content has been removed by an Administrator"

Hide Content

Request Refund

You may not request a refund that is not currently owned by you.