slider link and description not showing up on mobile

This support request was posted in Paeon by tracyholland

Request ID #2570 In Progress
  • Got my slider working great on the desktop, but it is not showing up on my Droid. Are there settings I’m missing?

    Juanfra Aldasoro

    Hi Tracy,

    Thanks for writing.

    Yes, that’s right, the caption is hidden on mobile devices. The reason is that there’s not enough space and it looks bad.

    Best,
    Juan.

    Ok is there a way to turn it off then on mobile phones? My slider images have a square to go behind the description text so it shows up. It looks silly without the text. Thank you for your help by the way!

    Juanfra Aldasoro

    Hi Tracy,

    You’ll need to edit the responsive styles for the .flex-caption class.

    
    @media screen and (max-width: 1024px) {
            .flex-caption,
    	.flexslider .slides li:first-child:nth-last-child(1) .flex-caption,
    	.flexslider .slides li:only-child .flex-caption {
    		display: block;
    	}
    }
    

    Best,
    Juan.

    Forgive me for my ignorance. Do you mean for me to insert this? If so, can you tell me exactly where?

    I’m having a few other mobile issues as well.
    – On the home page, the header is displaying in a bright blue instead of the header background I picked in Design and Styles in the Nice Themes settings.
    – The mobile navigation is acting wonky. When you show the drop down and try to scroll, the entire navigation disappears.

    Hi Tracy,

    That’s right. I’m sorry I didn’t explain that.

    You need to insert that code in your custom.css file, or the “Custom CSS” option within your theme options.

    With regards to the other mobile issues, would you please open new tickets for them so we can track everything independently and we help other users that might have the same problems 🙂

    Thank you,
    Juan.

    Thank you Juan. I inserted the code in the custom css but it is still showing.
    Will do for the other issues.

    Juanfra Aldasoro

    Hi Tracy,

    Thanks for your response.

    You mean that after you inserted that CSS the slider caption still disappears from your mobile device?

    Best,
    Juan.

    No, I thought the code was going to remove the slider from mobile devices. Nothing happened when I inserted the code. The slider still shows as it did before with no caption. If you have code to show the caption, I would be interested in trying that though.

    Hi Tracy,

    Actually that code is to show the slider caption. So you want to entirely remove the slider for mobile devices?

    Best,
    Juan.

    Have you tried adding the following CSS?

    
    @media screen and (max-width: 1024px) {
            .slider {
    		display: none;
    	}
    }
    
    

    Cheers,
    Juan.

    Sorry to be confusing. I would prefer to show it, but if that was not an option, I would need to remove it. I put the first code you sent me into my custom css, but it is not showing. Can you check it out?

    Hi Tracy,

    Thanks for your response.

    At this point I’m not sure what is that you want to do with the slider. The last code I’ve sent you hides the slider for mobile devices.

    I’ve visited your site a few secs ago and I see that you’re using the first code, which hides the caption for mobile devices.

    Would you please explain me what is that you need to do with the slider?

    Thanks,
    Juan.

    Ok, let’s start over, LOL.
    Initially, I created the slider with caption and link and it works great on a computer. When I looked at it on mobile, the slider was there, but the caption and link were missing. You mentioned before that it was removed from mobile because it did not look very good. I would like to show it on mobile. The first coding you sent me is the one I have inserted into custom css currently, but there was no change to the slider after I inserted it. Here is the code I am currently:

    @media screen and (max-width: 1024px) {
    .flex-caption,
    .flexslider .slides li:first-child:nth-last-child(1) .flex-caption,
    .flexslider .slides li:only-child .flex-caption {
    display: block;
    }
    }

    Hi Tracy,

    Then you need to put the code for the different resolutions that are hiding the slider caption:

    
    @media screen and (max-width: 1024px) {
            .flex-caption,
    	.flexslider .slides li:first-child:nth-last-child(1) .flex-caption,
    	.flexslider .slides li:only-child .flex-caption {
    		display: block;
    	}
    }
    
    @media screen and (max-width: 880px) {
            .flex-caption,
    	.flexslider .slides li:first-child:nth-last-child(1) .flex-caption,
    	.flexslider .slides li:only-child .flex-caption {
    		display: block;
    	}
    }
    
    @media screen and (max-width: 860px) {
            .flex-caption,
    	.flexslider .slides li:first-child:nth-last-child(1) .flex-caption,
    	.flexslider .slides li:only-child .flex-caption {
    		display: block;
    	}
    }
    
    

    Best,
    Juan.

Viewing 15 posts - 1 through 15 (of 17 total)

You must be logged in to reply to this topic.

Login to your Account

Welcome back! Please log in to your account by filling the fields below:

Forgot?

Not a member? Create a free account.

Create a Free Account

You're 27 seconds away from some awesome WordPress free stuff, benefits and more. Create a free account and have access to our free products, benefits and more!

Already have an account? Log in
Secure Server