Position:fixed not working in iPhone Chrome or Safari

HTML & CSS
1

On the mobile version of a website I want the logo mark to be fixed in the top left corner and a text link (“ABOUT”) to be fixed in the top right corner.

Website: http://tgroove.flywheelsites.com/

My question is specifically about the mobile version. The site uses the WordPress theme to determine which elements are shown based on screen size. The elements are showing up when they are supposed to, but they aren’t styled correctly.

Here’s the HTML and CSS:

div#tg_mark {
  position: fixed;
  top: 30px;
  left: 30px;
}

a#tg_mobile_about {
  display: block;
  position: fixed;
  top: 30px;
  right: 30px;
  text-transform: uppercase;
  letter-spacing: 2px;
}

<div id="tg_mark">
  <img id="tg_mark" src="http://tgroove.flywheelsites.com/wp-content/uploads/2018/03/Tongue_and_Grove_mark.png" width="50px" height="50px" alt="" />
</div>
<!-- tg_mark -->

<a id="tg_mobile_about" href="http://tgroove.flywheelsites.com/about">About</a>

Everything looks great in Chrome DevTool’s device simulator.

But on the real thing (iPhone Chrome and Safari) the about link is unstyled at the bottom of the page. Not only is it not positioned correctly, it isn’t even styled with the correct text-transform and letter-spacing.

I’ve double checked id, classes, styles. Eliminated other styles. Started over from scratch.

I’m embarrassed to say how long I’ve spent today trying to get this to work, but I was convinced I had made a stupid mistake.

Any help is greatly appreciated.

2

I guessed you must have changed the code as I’m seeing the logo at the top with a pink background stretching across on my iphone5. It doesn’t seem to bear any relation to the code you posted as its inside a mobile_sticky container which is positioned:fixed.

3

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