Slider not displaying correctly on mobile devices

I have also run into this problem. There are a couple of ways to fix this. The first way is to use less text in the slider. This is why the demo theme looks great on desktop and mobile devices, but not too great if you need more text.

What I did was increase the padding for the slider caption. By default, it is set to 20%. I changed it to 30%. Although text still runs over when most mobile devices are held in portrait mode, it looks fine when in landscape mode.

.ht-slide-cap-desc{
text-align: center;
font-size: 25px;
line-height: 1.4;
color: #FFF;
padding: 0 30%; <——– originally set to 20%
-webkit-animation-duration: 0.5s;
animation-duration: 0.5s;
-webkit-animation-delay: 1s;
animation-delay: 1s;
text-shadow: 1px 1px 1px rgba(0,0,0,0.2)
}

I haven’t seen this problem on a tablet yet. Just mobile phones.

Definitely use a child theme if you are making changes. I modified things directly for testing purposes.

This is more of a temporary solution. I’m assuming the theme developer will come up with something more permanent.

Hi, you can change the font and padding of the description text for better results.

Note.- Be careful with the css that you write on the WP editor, a bad character could create an error, so you’re styles couldn’t apply correctly.

@media screen and (max-width:768px) {    
	/* Slide on Mobile */
    .ht-slide-caption {
    	left: 0;
    	width: 100%;
    	margin-left: 0;
    } 

  .ht-slide-cap-desc {
    	padding-left: 12px;
    	padding-right: 12px;
	font-size: 16px;
  }
}