Buttons stuck to the top of viewport

HTML-CSS
1

Is there a way to fix this issue without using flex or grid?

To reproduce issue, click on the Blue play image to show the buttons.

Has to be viewed in these viewports to see the issue.

Small Desktop (1280 x 1024)
Medium Desktop (1920 x 1080)
Big Desktop (2560 x 1440)
iPad (1024 x 768)
iPad Pro (1366 x 1024)

To test code, click Run not update.

You can change the viewports inside JSitor.
https://jsitor.com/jWS9UmnUne

Changing this relative to absolute does not fix the issue,
Doing that, not all the buttons are viewable.

.wrapb {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 582px;
  height: 717px;
}

Anyone know how this issue would be fixed?

@bbsmooth @seekinfox

2

It looks like you’ve got just about everything on the site positioned absolutely. It’s a nightmare. You’ll make your life a lot easier by doing some research and learning flexbox and/or grid.

3

Would you know how the issue would be fixed without using flex or grid?

Is there a way?

or, there is no way, and it can’t be done?

Is there anything I could try?

4

Surely it can be done using absolute. You are welcome to continue down that path, but it will be a hard-to-read, hard-to-maintain, horrid, putrid mess. I’ve said my piece.

5

I’ll even show you how easy it is: https://codepen.io/colinthornton/pen/jOwEqNK

6

Now I want to try to figure how to get the original code working without flex or grid.

To have an example of how it would be written.

I just made a grid version and a flex version, now I want to fix the absolute version.

7
8

Am I only dealing with one class?

Am I adding another class?

Also, as I mentioned before, at the top here, changing this to absolute, does not fix the issue.
Doing that, not all the buttons are viewable.

You are not able to scroll up to see all the buttons.

.wrapb {
  position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  margin: auto;
  width: 582px;
  height: 717px;
}

9

how about you remove that part and add

margin: 10% auto;

not a good practice … but it works for now…

10

You meant this:

.wrapb {
  /* position: relative;
  left: 0;
  top: 0;
  right: 0;
  bottom:  0;
  margin: auto; */
  margin: 10% auto;
  width: 582px;
  height: 717px;
}
11

hi. ı am web developer. If there’s anything I can help with, you can ask. GOOD DAYS