How can I reduce the size of the root container without altering Javascript?

Store Design
, , , ,
1

Hello dear Shopify community!

I was on the website CodePen and was looking for a fancy idea on how to announce the next product launch to my customers. I decided to use a red wavy movement. So I created a custom.css and a custom.js where I copied in the code. And lo and behold, it works!

The problem is that I would like to have the ROOT contrainer smaller, I would prefer to fix the height. I have already tried to change it with CSS but without success. The developer tool shows that a canvas is being created, but with so much javascript code I can’t see through it.

My question:

Is there a way to edit the height of the root container without editing the javascript?

I have uploaded a short video, and also linked under below the CodePen link if anyone would like to take a look<3.

I am grateful for any answer.

Used theme: DAWN
CodePen: https://codepen.io/sfi0zy/pen/VwqwPZz

Canvas:

My current HTML:

My current CSS:

  • {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    }

body {
overflow: hidden;
background: #eeeeee;
}

.banner {
width: 100%;
height: 10rem;
background-color: red;
}

.root {
width: 100%;
height: 20vh;
}

.full-screen-3d-example {
opacity: 0;
transition: opacity 1s ease-out;
}

.full-screen-3d-example.-loaded {
opacity: 1;

}

1 Like
2

Of course you can.

Say, like this:

#root {
  width: 100%;
  height: 20vh;
}
#root canvas {
  width: 100% !important;
  height: 100% !important;
}
  1. root is not a class of the element, it’s the ID, so you should prepend it with # not dot in CSS.
  2. JS code sets size of the canvas to match the window size. Width and height are set on element itself, so it has very high priority, however, adding !important to your CSS rules will override this.

Or you can use max-height property:

#root canvas {
  max-height: 20vh;
}

Because this property is not set, you do not need to use !important here.

However:

  1. This may not look great on a high narrow screen like mobile, so it may be necessary to tweak a bunch of parameters in JS, like fov, near and far…
  2. Not sure how good it will work on slower devices because it’s a live render.

One alternative to consider is to capture a screengrab video of this rendering and use this video in you store instead or even convert it to a GIF or APNG – this may end up easier to manage.