Home Forums Total Slider not displaying correctly on mobile devices

Viewing 5 posts - 1 through 5 (of 5 total)
  • Author
    Posts
  • #1234
    egcatx
    Participant

    When I view my site on a mobile device, the body text of the slide extends beyond the sides of the window.

    #1264
    nguyen4514
    Participant

    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.

    #1286
    Hash
    Keymaster

    Hi,

    The below CSS should fix the issue. Use some custom CSS plugin to add the below CSS
    We will come up with the fix in next update.

    @media screen and (max-width:1200px){
    .ht-slide-caption {
        left: 0;
        width: 100%;
        margin-left: 0;
    }
    }
    #1407
    Anotherdagou
    Participant

    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;
      }
    }
    #1445
    Hash
    Keymaster

    This problem has been fixed in our latest update release 1.1.4

Viewing 5 posts - 1 through 5 (of 5 total)
  • You must be logged in to reply to this topic.