Crelly Slider - Mobile

Hello,
I am trying to use Crelly Slider on my development site - before going live on my site. I’ve got it pretty well set up for desktop, but it’s giving me a problem when viewing on mobile.

Do you have any advice on how to get the text to render larger, and for the button be placed, so it’s not overlapping the text – all while not destroying how it looks on desktop?

Thanks.

Hello there,

Please try adding the below CSS code to Appearance > Customize > Additional CSS from dashboard.

    @media only screen and (max-width: 991px) {

     .cs-slide > div {
       display: block !important;
       width: 100% !important;
       left: auto !important;
       right: auto !important;
       text-align: center !important;
     }

     .cs-slide a[href="#primary"] {
       margin-bottom: -100px;
     }

     .cs-slide span {
       font-size: 16px !important;
       display: inline !important;
       word-break: break-all !important;
       max-width: 80% !important;
     }

     .cs-slide span span {
       font-size: 30px !important;
     }  
     
    } 

!important declaration applied everywhere to against inline styles. Do some adjustments as needed.

I hope this helps.

Regards,
Kharis

Kharis,
That seems to work - although I did adjust the font sizes to make the text more readable.

One more question, I had to add some hard returns so text didn’t run off the page - is there a way to modify the Line Height so the text (on mobile) doesn’t overlap?

Thanks.

Andy

Hello there,

Sorry :frowning: Not sure if that could be achievable as Crelly slider has several custom styles limitation. Your best bet could be minimize your sentence, of course if that acceptable.

Regards,
Kharis

Hello,

I have simillar sityation with the font on slider. I hav created additional css to change crelly slider on mobile, but I have no idea why I cannot change the size of the font.
Website is: www.am-cycling.com
Css added by me is:

@media only screen and (max-width: 991px) {
.crelly_slider_title1{

	top: 60px !important;
	left: 30px !important;
	
}

.crelly_slider_title2{
	top: 80px !important;
	left: 50px !important;
}

	.crelly_slider_button{
	top: 100px !important;
	left: 70px !important;
}

}

What I only need is to make font on crelly slider bigger on mobile.

Thanks,
Marcin

Hello Marcin,

Try adding this CSS code:

    @media only screen and (max-width: 991px) {

      .crelly_slider_title1 {
        margin-top: -25px !important;
      }

      .crelly_slider_title1 span strong {
        font-size: 22px !important;
      }

      .crelly_slider_title2 {
        margin-top: -5px !important;
      }

      .crelly_slider_title2 span strong {
        font-size: 22px !important;
      }

      .crelly_slider_button span {
        line-height: 40px !important;
      }
      
      .crelly_slider_button a {
        font-size: 20px !important;
        line-height: 50px !important;
      }  
      
    } 

Regards,
Kharis

Great. Thank you.
Could you also help me with centering .crelly_slider_button on mobile?

Hello there,

Try adding this code:

    @media only screen and (max-width: 991px) {
     
       .crelly_slider_title1,
       .crelly_slider_title2,
       .sydney-hero-area .crellyslider a[data-left="456"] {
         left: 50% !important;   
         -webkit-transform: translateX(-50%);
         -moz-transform: translateX(-50%);
         -ms-transform: translateX(-50%);
         -o-transform: translateX(-50%);
         transform: translateX(-50%);     
       }   
     
    }         

Regards,
Kharis

Hi

I am having the same issue. my photos does not display correct on mobile device in Perth Pro. Can you please help me?

Regards

Hello Johann,

Please share a link to your site, so I can have a closer look.

Regards,
Kharis

www.amafu.net.

Thanks
Johann

The photos are showing original size. Guess I need some css code for that?

Hi Kharis.

Did you receive the link?

Regards

Johann

Hi Kharis

Can you please have a look and advice it is quite urgent!

Thanks
Johann

Hello Johan,

I am sorry for the long delay.

As Crelly Slider limits the image responsiveness, ideally you should create two instances of Creally slider. The second one is for smaller image. However, Sydney Pro only has one slot to put shortcode of the slider. Thus, you should do a couple of code adjustments. As it’s more effective if I could do this for you, please share the working login credentials to your site admin area (/wp-admin) to my email at kharisblank@gmail.com. Mention the link to this topic to signal its a continuation from forum replies. Also, attach the smaller version of your slide image, which we’ll use for mobile slider.

Regards,
Kharis