Buttons stuck to the top of viewport

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

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.

2 Likes

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?

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.

3 Likes

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

1 Like

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.

1 Like

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;
}

how about you remove that part and add

margin: 10% auto;

not a good practice … but it works for now…

You meant this:

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

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

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