CSS显示没有对div及其内容不起作用

Question

Having a little trouble with css display:none. The problem is I want to hide a div that contains a repeater on large screens but the div and its contents are still there when testing in the browser. The div I would like to hide has the id imgList

I am unsure where the problem lies. Any help would be greatly received.

html

 <div class="row">
            <div id="slideShowContainer" class="col-md-12">

        <div id="slideShow" class="slideshow ">
            <div id="slideShowWindow">
                <asp:Repeater ID="rptSlides" runat="server" ClientIDMode="Static">
                    <ItemTemplate>
                        <div class="slide">
                            <img runat="server" src='<%#DataBinder.Eval(Container.DataItem,"Value") %>' width="650" height="450" />
                        </div>
                    </ItemTemplate>
                </asp:Repeater>

            </div>
        </div>

            </div>
            <div id="imgList" class="col-xs-12">


        <asp:Repeater id="rptShowPics" runat="server">
            <ItemTemplate>
                <div class="col-sm-12">
                    <img src='<%#DataBinder.Eval(Container.DataItem,"Value") %>'/>
                </div></div>
            </ItemTemplate>
                        </asp:Repeater>

            </div>

my css:

img {
    width: 100%;
    height: auto;
}
@media screen and (min-width: 800px) {

#slideShowContainer {
    display: block;
}

#imgList {
    display:none;
}

#slideShow #slideShowWindow {
    width: 650px;
    height: 450px;
    margin: 0;
    padding: 0;
    position: relative;
    overflow: hidden;
    margin-left: auto;
    margin-right: auto;
}

    #slideShow #slideShowWindow .slide {
        margin: 0;
        padding: 0;
        width: 650px;
        height: 450px;
        float: left;
        position: relative;
    }


}

@media screen and (max-width:800px) {
#imgList {
    display:block;
}
#slideShowContainer {
    display: none;
}
}

As I said I am unsure where the problem lies. the slideshow div display:none works fine and I cant see what is so different to cause such a problem

EDIT:

the rendered html:

 <div class="col-sm-12">
        <span id="ContentPlaceHolder1_lblError"></span>
        <div class="row">
            <div id="slideShowContainer" class="col-md-12">

        <div id="slideShow" class="slideshow ">
            <div id="slideShowWindow">

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_10708540.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_1308456.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_15254098.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_1886302.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_2008768.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_2008770.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_2275868.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_2854978.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_77129413.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_77347582.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_80296861.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_80313958.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_8922649.jpg" width="650" height="450" />
                        </div>

                        <div class="slide">
                            <img src="Images/portfolioImages/shutterstock_9754504.jpg" width="650" height="450" />
                        </div>


            </div>
        </div>

            </div>
            <div id="imgList" class="col-xs-12">



                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_10708540.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_1308456.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_15254098.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_1886302.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_2008768.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_2008770.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_2275868.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_2854978.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_77129413.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_77347582.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_80296861.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_80313958.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_8922649.jpg'/>
                </div></div>

                <div class="col-sm-12">
                    <img src='Images/portfolioImages/shutterstock_9754504.jpg'/>
                </div></div>


            </div>

Another Edit:

Incase it is something to do with my code behind or javascript they are as follows.

JavaScript:

$(document).ready(function () {

    var currentPosition = 0;
    var slideWidth = 650;
    var slides = $('.slide');
    var numberOfSlides = slides.length;
    var slideShowInterval;
    var speed = 2000;



    slideShowInterval = setInterval(changePosition, speed);

    slides.wrapAll('<div id="slidesHolder"></div>');

    slides.css({ 'float': 'left' });

    $('#slidesHolder').css('width', slideWidth * numberOfSlides);


    function changePosition() {
        if (currentPosition == numberOfSlides - 1) {
            currentPosition = 0;
        } else {
            currentPosition++;
        }
        moveSlide();
    }


    function moveSlide() {
        $('#slidesHolder').animate({ 'marginLeft': slideWidth * (-currentPosition) });
    }

});

My code behind (c#)

protected void Page_Load(object sender, EventArgs e)
{
    string[] filePaths = Directory.GetFiles(Server.MapPath("~/Images/portfolioImages/"));
    List<ListItem> files = new List<ListItem>();
    foreach (string filePath in filePaths)
    {
        string fileName = Path.GetFileName(filePath);
        files.Add(new ListItem(fileName, "Images/portfolioImages/" + fileName));
    }

    rptSlides.DataSource = files;
    rptSlides.DataBind();
    rptShowPics.DataSource = files;
    rptShowPics.DataBind();
}

Answer 1

Try having your display: block; outside of a media query and then overriding it with your min-width query, like this:

#imgList {
  display: block;
}

@media screen and (min-width: 800px) {

  #imgList {
    display: none;
  }
}

This will hide it above a width of 800px .

Answer 2

I copied your code into a simple html doc and ran it, it worked perfectly in Chrome.

I inspected the element, and indeed, when the screen is big, it is hidden, but when small, it shows up. this means that somewhere else in your code there is a style that is overriding your media query. most likely, somewhere in your code (possibly your bootstraps) it is being displayed.

to find out where this is doing it, go into chrome or firefox (i use chrome so it might be a tad different in firefox) and right click on the elements that should be hidden and choose inspect element. move up until you are located on the div with id="imgList" and you should be able to see every single CSS style affecting it. crossed out ones are overridden by others, usually ones higher on the list. i bet you will find a display:block that is not crossed out.

Answer 3

@media screen and (min-width: 800px) { This code will run when the screen is at least 800px wide.

@media screen and (max-width:800px) { This code will run when the screen is smaller than 800px wide.

What screen width are you trying to show hide it at?

I would also you not mix min and max queries in your CSS unless necessary. I personally like to start small and only use min queries. So my default styles run on mobile, then I do a min for phablets/tablets and another min for small desktops and a final min for wide screens. That way as I go down my CSS document I know the styles at the bottom override the styles at the top as the screens get larger. I never have to use max queries at all. Using both can get very confusing so to what is using what and when, in my opinion.

Answer 4

Have you tried using display:none !important; ? I've found with my CSS media queries that I had to use !important when hiding or displaying content at different widths.