Button unaligned when viewed on mobile

Hey guys, I’m working on my first big website project for my portfolio (I’ve done some small FCC projects in the past but I really want my portfolio to be unique so I designed a mock restaurant website from scratch, made a logo, did all the graphics, etc).

I have most of the layout working pretty good. I still have to add some breakpoints for super large sizes and some more unusual aspect ratios so it never breaks.

But one little glitch that is driving my nuts is that my back to top button becomes unaligned when I view it on Android.
It’s fine everywhere else!!

Does anybody have any thoughts on how to fix this?

I know there are a lot of little responsive glitches to fix and I’m working on those, they’ll just take time to conquer them all. I feel pretty confident those will be resolved just by getting in all my media query break points.

But this button is killing me I have no idea why its breaking :sweat_smile: I’d appreciate the help! Thanks very much!

Its plain html, css, and javascript so you can view source to see the code. (After I have it fully working I’m rebuilding the whole thing in react with more bells and whistles). I’m trying not to build out any of the content pages until I have the first page set in stone.

http://wytheria.com/JessicaJoy/pizzasavant/images/index.html

Screenshot_20200708-224752_Chrome|243x500

I’m not able to reproduce this. But I will suggest that you should position the caret div absolutely and center it with left, top properties rather than margins.

Try replacing the .backToTop CSS with the following :

.backToTop {
  text-decoration: none;
  font-family: "cervan";
  font-size: 4rem;
  z-index: 1;
  line-height: 0; /* 👈 So it doesn't take any height */

 /* 👇 Center the element */
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
1 Like

Thank you so much! It definitely helped. But now it’s too low. I wonder if this is possibly specific to my phone? But I have a note 8. And It seems to happen in chrome, in the linked in browser, facebook browser, and the stock browser that comes on the note :thinking:
I’m just so baffled it seems to work on everything else. It’s just on my phone just this button never lines up right on.

Well, that’s weird for sure.

One last thing you can try is to use flex box.

.backToTopBg {
  position: fixed;
  background-color: var(--ui-yellow);
  bottom: 1rem;
  right: 1rem;
  height: 45px;
  width: 45px;
  border-radius: 50%;
/* Center content vertically and horizontally with flexbox */
  display: flex;
  justify-content: center;
  align-items: center;
}

.backToTop {
  text-decoration: none;
  font-family: "cervan";
  font-size: 4rem;
  z-index: 1;
  line-height: 0;
  / * no need for absolute positioning now. */
}

I wish I could reproduce this bug!

1 Like

Thank you so much for your help! It still sits stubbornly out of place! I am very close to replacing the whole button with an svg image and just calling it a day. I’m so confused! But I really want to understand why it’s doing it, I feel like there has to be a ‘why’ in here somewhere.