'how to make size of detail elements consistent?

I am currently working on a website and am having difficulty with some detail elements.

var coll = document.getElementsByClassName("collapsible");
var i;

for (i = 0; i < coll.length; i++) {
  coll[i].addEventListener("click", function() {
    this.classList.toggle("active");
    var content = this.nextElementSibling;
    if (content.style.display === "block") {
      content.style.display = "none";
    } else {
      content.style.display = "block";
    }
  });
}
h1, p , body > ul, ol{
    text-align: center;
    align-self: center;
    background-color: rgba(255, 255, 255, 0.6);
    width: 40%;
    margin: 20px 29%;
    padding: 5px 3%;
}

h1 {
    font-family: 'Press Start 2P';
    font-size: 40px;
}

p, ul, ol {
    font-family: "Turret Road";
    font-size: 20px;
}


.left-column {
    width: 45%;
    float: left;
    margin: 0 2.5%;
        padding: 0;
}

.right-column {
    width: 45%;
    float: right;
    margin: 0 2.5%;
    padding: 0;
}

.column > li {
    width: 45%;
}

.classic {
    background-image: url("classic.jpg"); /* aspect ratio is 3:2 */
    background-size: 100%;
}

.futurunk {
    background-image: url("futurunk.jpeg"); /* aspect ratio is 16:9 */
}

.eccojams {
    background-image: url("eccojams.jpg"); /* aspect ratio is 1751:889 */
}

.mallsoft {
    background-image: url("mallsoft.jpg"); /* aspect ratio is 125:83 */
}

.synthwave {
    background-image: url("synthwave.png"); /* aspect ratio is 16:9 */
}

.latenight {
    background-image: url("latenight.jpg"); /* aspect ratio is 16:9 */
}

.chillwave {
    background-image: url("chillwave.jpg"); /* aspect ratio is 16:9 */
}
<body>
    <div>
        <p>Each of the 8 stages revolve around a certain theme:</p>
        <ul class="left-column" class="column">
            <li><details class="classic">
            <summary><h1>"Classic" vaporwave</h1></summary>
            </details>
            </li>
            <li><details class="futurunk">
            <summary><h1>Future Funk</h1></summary>
            </details>
            </li>
            <li><details class="eccojams">
            <summary><h1>Eccojams</h1></summary>
            </details>
            </li>
            <li><details class="mallsoft">
            <summary><h1>Mallsoft</h1></summary>
            </details>
            </li>
        </ul>
        <ul class="right-column" class="column">
            <li><details class="synthwave">
            <summary><h1>Synthwave</h1></summary>
            </details>
            </li>
            <li><details class="latenight">
            <summary><h1>Late Night LoFi</h1></summary>
            </details>
            </li>
            <li><details class="chillwave">
            <summary><h1>Chillwave</h1></summary>
            </details>
            </li>
            <li><details class="vaportrap">
            <summary><h1>Vaportrap</h1></summary>
            </details>
            </li>
        </ul>
    </div>
</body>

I want the expandable elements to be both the same width and expand to the same aspect ratio as the images, but neither of these happen. How do I do this?

htmlcss


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source

Related Questions