Crio slider works fine on a large screen but not showing on my tablet or smartphone

Hi Pauline,

Thanks for reaching out and thanks for using Crio Pro WordPress theme!

I inspected your page and I see exactly what you mean. It seems that some sort of break point has been inserted into your code somehow, causing the slider to disappear on smaller screen sizes. When did you first notice this issue? Is this something that has been on-going, or did it occur after a recent WordPress core, theme, or plugin update?

I’d like to replicate this issue in a dev enviornment. Would you mind navigating to the “Plugins” section of your dashboard and copy/pasting your list of plugins into this thread? That will allow us to recreate your theme using your plugin setup so that we can hopefully pinpoint the source of your issue.

We look forward to hearing from you soon regarding this matter!

Thank you for that Pauline!

I was able to somewhat replicate your sites current plugin configuration using the list you sent. I was not able to exactly replicate your issue but I did manage to find a pre-made “Crio Slider” block that seems to have better functionality than the BoldGrid Gallery plugin. As far as I can tell it should display on all screen sizes.

I will include the HTML of for “Slider” block I found in the Crio “Add Block” menu below. You can remove your current “Slider” section block and replace it with this one. You may have to play around with the controls to set widths for your images. In order to incorporate the included “HTML” switch to the “Text” editor tab inside of your page builder, add the code below, then switch back to the ““Visual” editor tab to edit your section in “block” format. Here’s the HTML to add:

<div class="boldgrid-section">
<div class="container">
<div class="row" style="padding-top: 75px; padding-bottom: 75px;">
<div class="col-md-12 col-xs-12 col-sm-12">
<div class="boldgrid-wrap-row boldgrid-slider" data-config="{&quot;arrows&quot;:false,&quot;autoplay&quot;:false,&quot;autoplaySpeed&quot;:10,&quot;adaptiveHeight&quot;:true,&quot;dots&quot;:true,&quot;swipe&quot;:true,&quot;infinite&quot;:true,&quot;colors&quot;:{&quot;dotsColor&quot;:{&quot;type&quot;:&quot;color&quot;,&quot;value&quot;:&quot;#000000&quot;},&quot;arrowsBG&quot;:{&quot;type&quot;:&quot;color&quot;,&quot;value&quot;:&quot;#1a1a1a&quot;,&quot;text&quot;:&quot;#FFFFFF&quot;}},&quot;bgOptions&quot;:{&quot;arrowsPos&quot;:&quot;standard&quot;,&quot;arrowsSize&quot;:&quot;30&quot;,&quot;arrowsDesign&quot;:&quot;square&quot;,&quot;arrowsOverlay&quot;:true,&quot;arrowsIcon&quot;:&quot;angle-double&quot;,&quot;arrowsBgColor&quot;:&quot;#1a1a1a&quot;,&quot;dotsPos&quot;:&quot;bottom&quot;,&quot;dotsSize&quot;:&quot;50&quot;,&quot;dotsOverlay&quot;:false,&quot;dotsColor&quot;:&quot;#000000&quot;}}">
<div class="row" style="width: 100%; display: inline-block;">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="text-center">

<img class="alignnone wp-image-122 size-full" src="http://crio-dev-environment.local/wp-content/uploads/2022/03/ixlibrb-0.3.5q80fmjpgcropentropycstinysrgbw846h267fitcropsfa976f441b06c6c055b800b8de47a1a3.jpg" alt="" width="846" height="267">

</div>
</div>
</div>
<div class="row" style="width: 100%; display: inline-block;">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="text-center" data-wp-editing="1">

<img class="alignnone wp-image-131 size-large" src="http://crio-dev-environment.local/wp-content/uploads/2022/03/656670-e1646763465515-1024x302.jpg" alt="" width="1024" height="302">

</div>
</div>
</div>
<div class="row" style="width: 100%; display: inline-block;">
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="text-center">

<img class="alignnone wp-image-130" src="http://crio-dev-environment.local/wp-content/uploads/2022/03/20407836-e1646763420502.jpg" alt="" width="641" height="267">

</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="boldgrid-section">
<div class="container">
<div class="row">
<div class="col-md-12 col-xs-12 col-sm-12"></div>
</div>
</div>
</div>

You’ll want to add it exactly in the place of your original slider. You can also click the blue “Add Block” button and search for a different Crio Slider format to incorporate.

I hope this helps Pauline! Let us know if you have any other questions for us.