EtchASketch: touch events options and centering grid container

Hello! I am wondering if there is a way to add a ‘touchstart’ event listener to the Etch-A-Sketch program so that it can be used on touch screens. I tried adding one by replacing ‘mouseover’ with ‘touchstart’ but didn’t see the desired result. Are there more steps to setting this up?

Secondly, I cannot seem to center my grid container on the page. I’ve tried the following on the element:

‘align-items: center’
‘justify-items: center’

which work for the buttons but not the grid container.

My project is here: https://github.com/jolisabeth/Etch-a-Sketch

Thank you for your help!
Johanna

I don’t know what you tell you about adding a ‘touch’ event listener. When I did this project, I just left it with the mouse-over.

For centering the an element, 95% of the time, I would highly recommend using flexbox or grid to position your elements. And I would recommend that you learn both of these ways. However, for this specific instance, you can just check out this link, which I know has a solution that will work for you:

I have this link saved because I have referenced it multiple times, but if you would google “centering element css” it would be one of the top picks. If you did not research this problem, be encouraged that googling is how many of us figure this out. Sometimes you have to google different phrases to find the right results - I call this process “googling what to google”.

1 Like