Bootstrap carousel no reacting when responsive

Question

I have a carousel set up with a small box inside it to display some text that the user can fill out. This box can be toggled on and off where it slides up and down as required.

However, in mobile devices, this box no longer appears. I've checked the element and I can see that it is firing, but nothing is appearing in my browser. Could someone take a fresh look over my code to see if I forgetting something?

I won't post the whole carousel code, just the affect area.

Carousel affect area:

<div class="container-fluid slider np">
    <div class="row clearfix">
        <div class="col-md-12 column">
            <div id="carousel-733617" class="carousel slide" data-ride="carousel">

                <div class="carousel-inner" role="listbox">
                    @foreach (var slide in Model.Content.GetPropertyValue<ArchetypeModel>("carousel"))
                    {
                        var imageMedia = Umbraco.Media(slide.GetValue("slideImage")).GetCropUrl("CarouselSlide");
                        var slideHeading = slide.GetValue("heading");
                        var slideText = slide.GetValue("text");
                        string relatedLinksRaw = slide.GetValue("relatedLink");
                        dynamic relatedLinks = null;

                        if (!string.IsNullOrEmpty(relatedLinksRaw))
                        {
                            relatedLinks = Json.Decode(relatedLinksRaw);
                        }

                        if (slideCount == 0)
                        {
                            slideClass = "item active";
                        }
                        else
                        {
                            slideClass = "item";
                        }

                        <div class="@slideClass" @*role="option" aria-selected="true" tabindex="0"*@>
                            <img alt="" src="@imageMedia" />
                            <div class="carousel-caption" style="z-index:20;">
                                <div class="buttonslide">
                                    <a href="#" class="btn btn-xs btn-default pull-right openclose">
                                        <i class="glyphicon glyphicon-chevron-down"></i> Close</a>
                                </div>
                                <div class="slidecontent">
                                    <h2>@slideHeading</h2>
                                    <p>
                                        @slideText
                                        <br />

                                        @if (relatedLinks != null)
                                        {
                                            foreach (var relatedLink in relatedLinks)
                                            {                                                    
                                                if (relatedLink.newWindow == true)
                                                {                                                       
                                                    <a href="@relatedLink.link" class="btn btn-square" target="_blank">@relatedLink.caption</a>
                                                }
                                                else
                                                {
                                                    <a href="@relatedLink.link" class="btn btn-square">@relatedLink.caption</a>
                                                }
                                            }
                                        }
                                    </p>
                                </div>
                            </div>
                        </div>

                                        slideCount++;
                    }

My Javascript that controls the box opening and closing:

    $('.openclose').click(function(e) { 
    if ($('.slidecontent').is(":visible")){
        $('.openclose').html('<i class="glyphicon glyphicon-chevron-up"></i> Show More');
    }
    else{
        $('.openclose').html('<i class="glyphicon glyphicon-chevron-down"></i> Close'); 
    }   

    $('.slidecontent').toggle('slow');  
    e.preventDefault();
});

Above is a quick MS Paint of the issue.

When I shrink down my browser, the carousel (the black box) resizes as per the responsive design. When it reaches a certain width, the green box automatically toggles off and disappears a bar with a button for Open / Close.

When the carousel is full size, the green box works just fine. It is when the black box is shrunk that the green box no longer appears. When I inspect the element, I can see my code is firing off something, however, the green box is not visible on my screen.

Answer 1

You can add media queries in javascript too.

You just need to change the 500px to whatever you want and add the code into the if you want to use.

// media query event handler
if (matchMedia) {
    var mq = window.matchMedia("(min-width: 500px)");
    mq.addListener(WidthChange);
    WidthChange(mq);
}

// media query change
function WidthChange(mq) {

    if (mq.matches) {
        // window width is at least 500px

    }
    else {
        // window width is less than 500px

        }
    }

}

Hope this helps, you can read more about it here .

Answer 2

I believe that the code in your CSS @media property is playing a role here. Check and confirm.

You can manually define how each screen may look. For example:

@media screen and (max-width: 300px) {
    body {
        background-color: lightblue;
    }
}

This will change the screen color if screen size is less than 300.