I have no idea what’s .mobcap but please remove it and put span there just like in my sample.

i tried it. it didnt work and it made captions worse and it started misbehaving. i removed it

please look at the slider in www.esolutions-dm.ae and say view source code and look at code of the slider. u will see that each slide has 2 captions and the second caption is div class mobcap and at top of page i put style of mobcap

i want to do it the same way in your slider, but div class mobcap is disappearing. please open www.cptauh.ae and say view source code then look at code of your slider. u will see the extra div class mobcap in the first slide but this extra line is not showing at all

Why do you want to use that class? Doubling the same caption doesn’t make sense. Please do it as I advised you because it works perfect on mobile and desktop devices: https://imgur.com/a/BVfEp

          <h3 class="ls-s1 caption-color" style="top: 357px; left: 756px; slidedirection: right; slideoutdirection: right; durationin: 400; durationout: 1000; easingin: easeOutExpo; delayin: 1000;"><span>Powerful HTML5 Template</span></h3>

If you want different caption content for mobile and desktop devices then don’t create them inside one < h3 > tag. Add another < h3 > caption and disable / enable it on devices you want.

i did it your span way. plz force refresh by cntrl f5. the color spoilt on laptop view and it became unreadable. in mobile view the caption is too big and it covers half the picture

i need color to be white in laptop view and i need caption to show in smaller font under the slide and not in it like it is now

you said:- If you want different caption content for mobile and desktop devices then don’t create them inside one < h3 > tag. Add another < h3 > caption and disable / enable it on devices you want.

how do i do that? this is what i was trying to do with div class mobcap and it is not working

Font color fix:

.ls-slide h3 span { color: #fff; }

and there (it’s code which I provided you yesterday) you can adjust font size for mobile devices by changing font-size for the span (it’s 16px now).

<style>
    @media only screen and (max-width: 767px) {

        .slide-caption,
        .caption-gray,
        .caption-color,
        .caption-transparent {
            width: 100% !important;
            left: 0 !important;
            top: auto !important;
            bottom: 0 !important;
            border-radius: 0;
        }

        .slide-caption span,
        .caption-gray span, 
        .caption-color span, 
        .caption-transparent span {
            font-size: 16px;
            color: #fff;
            font-weight: 600;
            display: block;
            padding: 15px;
        }
    }
</style>

done. i fixed the caption for mobile. plz see https://pasteboard.co/GLflRUC.png

how do i make the caption start from directly under the slide in mobile view? now the caption is in the slide for mobile view. i want the caption to come under the slide like here https://pasteboard.co/GLfnpS5.png

that’s not possible with this slider

if both laptop view and mobile view use same captions then i guess u are right. can i create another h3 for mobile view and push the second one down?

i tried adding another caption but the second one is vanishing and not showing in code inspector

It won’t work. You can’t move caption outside slider’s container.

ok. i have another idea. plz check www.cptauh.ae

i added:- <div style="text-align: center;">text goes here</div> i want the text in that div to change depending on which slide is showing. if the first slide is active then that div will know and the caption of first slide will show in the div. when the second slide shows the text will change and so on

is this possible?

Captions are hidden in media queries (at the bottom of style.css they have “display: none”).

ok, i removed the style none from style.css

https://pasteboard.co/GKVkF4V.png is what i see on code inspector on my laptop. the handwriting of caption is very small. here the image showed in full

next i tried it on iphone 6 of a friend of mine. https://pasteboard.co/GKVldR6.png is what i saw. here the image was shown zoomed in and cropped and there are no captions. i also tried it on another phone which is samsung s7. the image also is zoomed in and cropped but in the other phone the caption showed but in very small handwriting

https://pasteboard.co/GKVngoz.png is the captions for mobile view on www.esolutions-dm.ae. i need the same thing in your layout. in the other site i did it like this:- <li> <img src="images/1.jpg" alt="" /> <div class="flex-caption"> <div class="slide-txt"> <p>Enjoy peace of mind while we ensure your data is protected, available and completely managed</p> </div> </div> <div class="mobcap"> <p>Enjoy peace of mind while we ensure your data is protected, available and completely managed</p> </div> </li> i added extra caption which is class mobcap for mobile screen. the style for mobcap class is:- .mobcap { padding-bottom: 20px; padding-top: 41px; text-align: center; display: none; } @media only screen and (min-device-width : 320px) and (max-device-width : 767px) { .mobcap { display: block; } } it is initially display none and on mobile screen it changes to display block i tried the same thing in your slider:- <!-- Slide 1 --> <article class="ls-layer" style="slidedelay: 10000;"> <img src="images/slide-01.jpg" class="ls-bg" alt="" /> <h3 class="ls-s1 caption-transparent" style="top: 357px; left: 40px; width: 192px">Cyber Security is what we do.</h3> <div class="mobcap"> <p>Cyber Security is what we do.</p> </div> </article> but it is not working and that extra caption is not showing at all

i need from you 2 things which are:- 1) how to stop the image from zooming in and cropping in mobile view 2) how to make the captions work in my other way

thanks

can u plz give me your email if u cant see my code properly so i can send u what i did

I’ll reply you within 30 minutes but could you put slider code in < code > and < pre > tags? Code is not readable here in comments.

i fixed code. it is readable now

Solution for captions:

1. Add this to CSS:

<style>
    @media only screen and (max-width: 767px) {

        .slide-caption,
        .caption-gray,
        .caption-color,
        .caption-transparent {
            width: 100% !important;
            left: 0 !important;
            top: auto !important;
            bottom: 0 !important;
            border-radius: 0;
        }

        .slide-caption span,
        .caption-gray span, 
        .caption-color span, 
        .caption-transparent span {
            font-size: 16px;
            color: #fff;
            font-weight: 600;
            display: block;
            padding: 15px;
        }
    }
</style>

2. Add < span > in caption:

            <h3 class="ls-s1 caption-color" style="top: 357px; left: 756px; slidedirection: right; slideoutdirection: right; durationin: 400; durationout: 1000; easingin: easeOutExpo; delayin: 1000;"><span>Powerful HTML5 Template</span></h3>

3. Effect: https://imgur.com/a/BVfEp

but I’m not sure what did you mean by cropping images on mobile devices. Everything looks fine, what’s the problem?

Hi, is it question related to wordpress or html version?

hi, works for me. what browser do you use

The slides do not start automatically and do not change.

Hi, add this to layer slider section in custom.js:

autoStart: true;

you mean here:

$('#layerslider').layerSlider({ skin : 'fullwidth', hoverPrevNext : true, autoStart : true, navStartStop : false, navButtons : false, autoPlayVideos : false, animateFirstLayer : false });

Yes, does it work?

No it does it, and checked that all tags are closed and I do not have the site online yet, let me know.

could you post link to your site?

http://factoryclearanceservices.co.uk/contact.html

You need to create google maps api key: https://console.developers.google.com/apis/ and paste it inside URL in nevia’s html markup: https://maps.google.com/maps/api/js?key=API (instead of “API”)

<section class=”google-map-container”>

 
</section>

<script src="https://maps.google.com/maps/api/js?key=AIzaSyBoIiTGW8-gyV7TPSYyXYSDvix7XXnPHtE"></script>

<script src="scripts/jquery.gmap.min.js"></script>

<script type="text/javascript">
jQuery('#googlemaps').gMap({
    maptype: 'ROADMAP',
    scrollwheel: false,
    zoom: 11,
    markers: [
        {
            address: 'petworth', // Your Adress Here
            html: '',
            popup: false,
        }
    ],
});
</script>

does the above code look correct? still not working… sorry