Next.js Discord

Discord Forum

Weird issue with placement

Answered
misakii posted this in #help-forum
Open in Discord
Avatar
misakiiOP
Hello everyone, I'm currently encountering a weird issue when it comes to placing something on my page. It works fine on PC and the Mobile version on PC, but as soon as I try to look at website on my iPhone, this section is placed in a different way. This doesn't happen on my friend's phone, which is an Android. Here is the code of the section and screenshots.

  <div className="absolute top-4 flex flex-row gap-2">
      <Link
        href={`https://discord.com/users/${process.env.NEXT_PUBLIC_DISCORD}`}
        target="_blank"
        className={`flex flex-row items-center gap-2 rounded-full border ${status.status != "offline" ? "border-green-500/20 bg-green-500/20 text-green-500 dark:bg-green-700/40" : "border-zinc-600/40 bg-accent text-muted"} px-2 drop-shadow dark:drop-shadow-xl`}
      >
        <div className="relative">
          <div
            className={`size-2 rounded-full ${status.status != "offline" ? "bg-green-500" : "bg-muted"}`}
          />
          {status.status != "offline" && (
            <div className="absolute -top-0 size-2 animate-ping rounded-full bg-green-500" />
          )}
        </div>
        <span className="text-[13px] capitalize">
          {status.status != "offline" ? "Online" : "Offline"}
        </span>
      </Link>
      <TooltipProvider>
        <Tooltip>
          <TooltipTrigger asChild>
            <div className="relative flex cursor-pointer flex-row items-center gap-2 rounded-full border border-zinc-600/40 bg-accent px-2 text-muted drop-shadow-xl">
              <FaSpotify className="size-3" />
              <span className="max-w-48 truncate text-[13px] xl:max-w-60">
                Listening To {status.spotify?.name || "Nothing"}
              </span>
            </div>
          </TooltipTrigger>
          <TooltipContent>From {status.spotify?.artist}</TooltipContent>
        </Tooltip>
      </TooltipProvider>
    </div>


Any help is appreciated!
Image
Image
Image
Answered by misakii
i fixed it with relative positioning earlier but im getting another weird bug that ill fix on my own
View full answer

11 Replies

Avatar
misakiiOP
Android screenshot too, I have no idea what's causing this 😭
Image
Avatar
James4u
Well it must be a safari-specific issue then
do you have any tools like browserstack? where you can run safari device and inspect what's going on?
or just try to open it in safari browser and inspect in mobile demension
Avatar
misakiiOP
i tried on 4 different ios browsers, including google and google chrome
the other 2 being arc and safari
they all do this
Avatar
Flemish Giant
Check these.
1. Viewport settings and scaling:
does you code contain this? - <meta name="viewport" content="width=device-width, initial-scale=1.0">
2. Absolute Positioning:
You’re using absolute positioning on the <div className="absolute top-4 flex flex-row gap-2"> element. This could cause layout shifts on different screen sizes, especially on mobile. If you're relying on absolute positioning for layout, it can behave differently on iPhones due to varying rendering behaviors.
then fix like this.
<div className="relative top-4 flex flex-row gap-2">
3. Check for mobile-specific media queries: Since the layout works on Android but not iPhone, check if you have any media queries or CSS that might be overriding styles on mobile devices. iPhones sometimes behave differently with certain CSS properties, especially for things like positioning or flexbox behavior.
@media (max-width: 768px) {
}
4.Browser-specific quirks on iOS: Safari on iOS might interpret CSS rules slightly differently from Android browsers. If the issue is specific to Safari on iPhone
body {
-webkit-overflow-scrolling: touch; /* For smooth scrolling on iOS */
}
Then test with Safari Developer Tools...
Avatar
misakiiOP
that looks like the most chatgpt answer of all time 😭
Avatar
misakiiOP
i fixed it with relative positioning earlier but im getting another weird bug that ill fix on my own
Answer
Avatar
misakiiOP
thanks anyways