Slider text looking strange on mobile devices

Discussion in 'ColorWay WordPress Theme' started by ctritch, Dec 24, 2013.

  1. ctritch

    ctritch New Member

    Joined:
    Mar 17, 2012
    Messages:
    3
    Likes Received:
    0
    Location:
    Maryland, USA
    We made our site using Colorway. It works well on regular computer screens, but does some strange things on mobile devices.

    1. On tablets like the iPad, the slider text spreads out to the right, which overlaps too much of the image in the slider. We would like to set the width of the slider text so it doesn't do that on smaller (tablet) screens.

    2. On smartphones, such as the iPhone, the slider text disappears completely. Perhaps it would be too small anyway, but is that intentional?

    If #2 cannot be corrected, then a solution to #1 would be nice. If the only alternative is to make the slider text entirely invisible, I guess we could do that but it's not our first choice.

    Thank you in advance! Our site URL if you want to test it: www.dance-alchemy.org

    (I did search the forum but found nothing about this topic.)
     
  2. ctritch

    ctritch New Member

    Joined:
    Mar 17, 2012
    Messages:
    3
    Likes Received:
    0
    Location:
    Maryland, USA
    Following on... perhaps if I can make one adjustment, I can work around the issue on tablets. So can someone tell me how to remove ONLY the color bar that appears at the edge of the slider text? I want to keep the slider text and the small window where it appears, but eliminate that vertical bar of color at the right-hand edge of it. I am comfortable with CSS code and putting it in the Custom CSS section. Thanks.
     
  3. ctritch

    ctritch New Member

    Joined:
    Mar 17, 2012
    Messages:
    3
    Likes Received:
    0
    Location:
    Maryland, USA
    Merry Christmas to all.... here is the code I found to remove the right-edge border in the slider text box:

    .slide .slide-content.entry {
    border-right: none;
    }

    So I answered my own question – or at least part of it – and I hope the answer will help others. I would still like to know if I can make the slider text box less wide, but I can wait until after Christmas for my answer. :)
     
  4. Piyush

    Piyush Support Staff

    Joined:
    Dec 8, 2012
    Messages:
    4,745
    Likes Received:
    107

    Hello,

    Paste the code given below in Custom CSS section
    (Appearance -> Theme Options -> Styling Options -> Custom CSS) of your dashboard.

    Code:
    @media only screen and (max-width: 960px) and (min-width: 768px) {
    .slide .slide-content.entry {
    width: 250px ! important;
    bottom: 20px ! important;
    padding: 2px 5px ! important;
    }
    }
    
    You can adjust the above values as per your requirement to change the width of slider caption in tablet view.
    I hope this will fulfill your requirement.
     

Share This Page