Need Help Centering

HTML-CSS
1

Hey everyone,

I have tried all the different centering methods I know but for some reason, nothing is working on the “Scroll” with the arrows underneath it. Currently working in the 320px media query view, if you inspect and view my portfolio website at 320px you will see what I am talking about. Does anyone know how I can center it?

3

Get rid of the margins and use 50% for the left offset.

.scroll {
  position: absolute;
  bottom: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  left: 50%;
  margin-left: unset;
  margin-bottom: unset;
}

By the way, I would suggest you unhide the overflow on the page so you can see it and fix it.

3 Likes
4

Wow, never knew about unset until now, thanks! And thanks for the suggestion, now I can see that wave-two is overflowing.

5

No problem, and yes the unset value is quite handy.

You can also use it with the all property which can come in useful as well (mainly for custom-styled elements).

<button>Click</button>
<input type="text">

button,
input {
  all: unset;
}
2 Likes
6

That’s very helpful, learn something new every day. Thanks for the support! :raised_hands:

1 Like
7

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