Kevin Powell - Community•10mo ago

Responsive Design Q#1

I listed this as Q#1 because I anticipate having more similar questions. Normally, when I just place a div over the top of another div using absolute position, the position of the element becomes severely displaced when zooming in and out. In the video, Drew mentions he queries the pixel size. Is this how he gets the dpad to stay perfectly in place?

.corner_topleft,
.corner_topright,
.corner_bottomleft,
.corner_bottomright {
   position: absolute;
   width: var(--pixel-size);
   height: var(--pixel-size);
   background: var(--bg);
   z-index:2;
}

.corner_topleft {
   top: calc(var(--pixel-size) * -1);
   left: calc(var(--pixel-size) * -1);

.corner_topleft,
.corner_topright,
.corner_bottomleft,
.corner_bottomright {
   position: absolute;
   width: var(--pixel-size);
   height: var(--pixel-size);
   background: var(--bg);
   z-index:2;
}

.corner_topleft {
   top: calc(var(--pixel-size) * -1);
   left: calc(var(--pixel-size) * -1);

If so, can you explain more about what the

var(--pixel-size)

var(--pixel-size)

and

calc(var(--pixel-size) * -1)

calc(var(--pixel-size) * -1)

are doing. If not, or if there are other methods, can you please share an explanation. I do not want to copy and paste other people's code without understanding how it works. I want to dissect and study it, so I can write my own snippet with my own terminology. Drew Conly's Code on Codepen https://codepen.io/punkydrewster713/full/WNrXPrb

Drew Conley

CodePen

Top Down 2D Game Camera

Here's a method for creating a camera illusion for top down web games. This Pen covers arrow key movement and camera following. Video Tutorial here: h...

3 Replies

Kevin Powell•10mo ago

So, gonna do a little experiment with my answer here, where I've done it in video 😄 - I hope I understood you're question 😆 If it answers your question, and also, if you're okay with it, I'll record a little intro/outro and make it into a YT video. If not, it's all good as well 🙂

bluestreak711OP•9mo ago

So right off that is extremely helpful and after this is all said and done, I would highly recommend you up it to YT. I think I may have some follow up questions, but I need to watch your video a few more times and take some notes. Drew's jQuery for the screen size was so few that I missed that part. If I am correct, he only used two queries for the screen size. In my past experience, most people have to query the screen size for the most subtitle changes which ends up being dozens upon dozens to fine tune web pages. I do not quite understand how Drew got away with only two queries.

Kevin Powell•9mo ago

He sort of just ended up doing a "small", "medium", and "large" size. Since it's just a square, and everythign scales with it thanks to that custom property, he's just making it get bigger at set points and not worrying about it too much from what I can see. A big part is having the scale of everything linked to that custom property though

Gaming

Programming

Responsive Design Q#1