Positioning svg’s in a grid, box like structure

HTML & CSS
21

Update:

I think I figured it out.
https://jsfiddle.net/yj1bLvze/1/

I added this line: to homeClickHandler
document.querySelector(".outer").classList.remove("isOpen");

const manageUI = (function makeManageUI() {

  function homeClickHandler() {
    showActive();
    document.querySelector(".outer").classList.remove("isOpen");
  }

const manageCover = (function makeManageCover() {

  function coverClickHandler(evt) {
    hideAll(config.containers);
    const cover = evt.currentTarget;
    showCovers(cover);
    showBody();
    document.querySelector(".outer").classList.add("isOpen");
  }
1 Like
22

Yes you just needed to remove the isOpen class on returning to the original svgs.

Why have you overlapped them on hover? It looks odd. Bring the shadow to the front on hover like this.

.thePlay:hover {
    box-shadow: 0 0 0 5px rgba(43, 179, 20, 0.5);
    position: relative;
    z-index: 1;
}
1 Like
23

Since changes have been made to the code, the code seems to work with these properties removed, does that mean they are not currently needed are required?

https://jsitor.com/Sgo2yebc9

https://jsfiddle.net/9fLzhtmb/

.outer.isOpen {
  /* display: flex;*/
  width: auto;
  /*align-content: stretch;*/
}
24

As far as I can tell they are not needed.

The element already is display:flex so that certainly is not needed (unless you were hiding it somewhere with display:none). The align-content rule doesn’t seem to have any influence on the design as it stands either,

1 Like
25

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.