CODEWITHSUNDEEP
htmlcss
dannav147
dannav147

Reputation: 29

div not visible, even after adding display:block

I am having trouble hiding and showing a div once it gets to a certain page width - the idea is that at mobile sizes, I would take a div and switch it out for another one. Specifically, I'm using issuu to show sheet music, but for some reason it doesn't display when I want it to. It's clearly visible because it takes up space, but I can't see it for some reason. At 250% zoom on a macbook 13 inch it shows up as taking space, but is not actually visible. Any help would be greatly appreciated!

Here is the code:

HTML:

            <div id="musiccontent">
            <div id="musicheader">
                Shades of Red (2012)
            </div>
                <div data-configid="11690692/7620748" style="width: 525px; height: 340px;" class="issuuembed"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
                <div id="issuumobile">
                    <div data-configid="11690692/8138261" style="width: 320px; height: 207px;" class="issuumobile"></div><script type="text/javascript" src="//e.issuu.com/embed.js" async="true"></script>
                </div>
                <audio controls>
                    <source src="music/Shades of Red.mp3" type="audio/mpeg">
                </audio>
            <p>Recording from an informal reading by the UCSB Chamber Orchestra, conducted by Christopher Rountree.</p>
            <br>
        </div>
    </div>

CSS:

normal display:

.issuuembed{
    margin: 0 auto;
    display: block;
}

.issuumobile{
    margin: 0 auto;
    display:none;
}

media query display:

@media screen and (max-width: 600px){
#images{display: none;}

body{
    padding-left: 2%;
    padding-right: 2%;
}

.eventtext{width: 75%; /* 400 / 1080px */}

.line{width:75%;}

table th:first-child, th:nth-child(2), th:nth-child(3), th:nth-child(4){
    display: none;
}
table td:nth-child(2), td:nth-child(3), td:nth-child(4){
    display: none;
}

td{width:85%;}

#tablelist{display: none;}

.issuuembed{
    float: center;
    display:none !important;}

.issuumobile{
    float:center;
    display:block !important;
}
}

Website: http://cristinalord.com/shadesofred.html

Upvotes: 1

Views: 3907

Answers (2)

blurfus
blurfus

Reputation: 14031

First, it is taking up space because you set the width/height attributes

Second, I removed the !important as they seem to be taking precedence over many things.

.issuuembed{
    margin: 0 auto;
    display:none
}

#issuumobile{
    margin: 0 auto;
    display:block;
}

Third, you need the image to be placed inside the div to show/hide

See Demo

After your comments, I played with the HTML a bit more and changed this

<div id="issuumobile">
    <div data-configid="11690692/8138261" class="issuumobile"></div>
</div>

to this

<div id="issuumobile" data-configid="11690692/8138261" class="issuuembed"></div>

UPDATED DEMO

Upvotes: 3

andyw_
andyw_

Reputation: 500

Firstly, you only need to load embed.js once.

Secondly, you require issuuembed class.

So here's the solution

Note the new introduced classes mobile-issuu and desktop-issuu

So here's the default style

.desktop-issuu {
    width: 525px;
    height: 340px;
    margin: 0 auto;
    display: block;
}

.mobile-issuu {
    width: 320px;
    height: 207px;
    margin: 0 auto;
    display:none;
}

Here's the style applied with media query of @media screen and (max-width: 600px)

.desktop-issuu {
    display:none;
}
.mobile-issuu {
    display:block;
}

The markup

<div data-configid="11690692/7620748" class="issuuembed desktop-issuu"></div>
<div class="mobile-issuu">
    <div data-configid="9032795/8168837" style="width: 320px; height: 207px;" class="issuuembed"></div>
</div>

Note that I'm now loading embed.js at the very end to make sure that DOM is ready before it tries to access the DOM.

Demo here

Upvotes: 1

Related Questions