0

I have these two buttons, they work fine on 1920x1080 but when I resize the window or open the webpage on an another device with a different resolution they go off screen.

#custom-button {
  background-color: transparent; 
  border: none;
  cursor: pointer;
  position: absolute;
  top: 55%;
  left: -59%;
  animation: riseAnimationitch 2s ease-in-out;
}

#custom-button2 {
  background-color: transparent; 
  border: none;
  cursor: pointer;
  position: absolute;
  top: 55%;
  left: -33%;
  animation: riseAnimationgit 2s ease-in-out;
}

I was expecting for it to dynamically resize with my other buttons and images.

I tried to mess around with the body block to try and get some other results.

body {
  font-family: 'M PLUS Rounded 1c', sans-serif;
  background-image: url('wallpaper.png');
  background-repeat: no-repeat;
  background-size: cover;
  max-width: 1920px; /* Set a maximum width for the body */
  margin: 0 auto; /* Center the body horizontally */
}
M0nst3R
  • 5,186
  • 1
  • 23
  • 36
GrandDiJay
  • 1

1 Answers1

0

So, from what i can tell, you are trying to center to buttons to the absolute center of the viewport (visible window) of a page.

It's very logical why the buttons go offscreen: as the viewport gets resized its dimentions and consequently all the percentages which co-responde to amounts of pixels change, resolting in messing up the alignment.

To combat this,

I'd, first of all, remove the position: absolute, top and left which you have set. Then, I'd place the two buttons (#custom-button & #custom-button2) inside a div in the html side of the code to which I would add the following css:

#parentDivOfButtons{
display: grid;
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}

Let me explain this

I created a div with the buttons in it:

<div id="parentDivOfButtons">
<button id="custom-button">First Button</button>
<button id="custom-button2">Second Button</button>
</div>

Then: I set the display of the div to grid so that the buttons go one under the other

How it currently looks (I have added a colorful body background and a red border on the div to make everything more visible):

The two buttons are now one below the other ,

set the position to fixed, so that the div is floating, not changing the layout of the page and can be easily moved

The div is now at the up-left side of the screen ,

set the top and left of the division to 50%

The buttons are almost exactly at the center of the viewport!

At this point, the buttons are almost exactly at the center of the viewport. The only thnig remaining is moving left and upwards half of the div. To do that, I utilised the transform css property and defined its value as translate(-50%, -50%) translate in case means move

And there you have it!

The buttons are finally perfectly centered!

Two perfectly centered buttons!

Of course the red box won't be visible for you as I've set it for illustration purposes using the border property and the background will be your picture (wallpaper.png).

Optional:

To make sure that the div we created in never bigger than the viewport resulting in it overflowing, we can do the following:

max-width: 100vw;
maxheight: 100vh;
Χλαπάτσας
  • 11
  • 4