Any idea why site on Vercel on phone looks different?

[Bego96]

I deployed my website to Vercel to test it out, i made site with React and deployed it from github. Problem i have is that when i view it on my Xiaomi 11t seems like styles arent all correct like it looks on my PC when i test with responsive design using inspect element. Here are screenshots to see what i’m talking about:

Here’s image from my browser:

Image from Vercel:

It doesnt seem to update Vercel very well. I dont know why, if anyone had same problem before please let me know.

[lasjorg]

Without seeing the code and the live site we really have no way of helping.

Is it the color styles that are not the same?

[Bego96]

Sorry for late reply, yeah i deployed the website at https://code-design.ba/ but unfortunately issue still persists. If i view website on my Xiaomi device, it looks like second pic from Vercel, but on Samsung phones and every other one it looks okey.

Here’s my component code:

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { useState, useEffect } from 'react'
import HeaderImage from '../../assets/images/header/scott-webb.jpg';
import { Link } from 'react-router-dom';
import { motion as m } from "framer-motion";


export default function Header() {

    const [btnArr, setBtnArr] = useState(false);
    const [isLoaded, setIsLoaded] = useState(false);

    useEffect(() => {
        setIsLoaded(true);
        console.log("Hello");
        
    }, []);

    console.log(isLoaded);
    return (
        <m.header initial={{opacity: 0}} animate={{opacity: 1}} 
        transition={{duration: 0.75, ease: "easeOut"}}
        className="bg-black flex flex-col justify-center items-center h-[550px] relative xl:h-[450px] lg:h-[400px] lg-helper:h-[350px] md:h-[280px]" >
            
                    <m.div initial={{opacity: 0}} animate={{opacity: 1}} 
        transition={{duration: 0.75, ease: "easeOut"}} className="flex flex-col justify-center items-center absolute top-[50px]">
                    <Link to="/Projekti"><button type="button" className="relative bg-cyan-600 hover:bg-cyan-500 w-[230px] h-[45px] text-white flex items-center justify-between rounded" onMouseEnter={() => setBtnArr(true)} onMouseLeave={() => setBtnArr(false)}><span className="ml-[30px]">Pretražite projekte</span><FontAwesomeIcon icon="arrow-right" className={`ml-[15px] text-xl absolute left-[70%] transition-all ${(btnArr) ? 'ml-[20px]' : ""}`}></FontAwesomeIcon></button></Link>
                <m.div initial={{opacity: 0}} animate={{opacity: 1}} 
        transition={{duration: 0.75, ease: "easeOut"}} className="z-10 mt-[20px]">
                    <h1 className="text-7xl font-semibold tracking-wide mb-[10px] text-white lg:text-5xl lg:mb-[5px]">OTKRIJTE <span className="">SVIJET</span></h1>
                    <h1 className="text-7xl font-bold tracking-wide mb-[10px] text-black lg:text-5xl lg:mb-[5px]">NAŠIH</h1>
                    <h1 className="text-7xl font-bold tracking-wide mb-[10px] text-black lg:text-5xl lg:mb-[5px]">PROJEKATA</h1>
                </m.div>
                <div className="w-[60vw] absolute top-[140px] md:w-[70vw] lg:top-[115px] sm:w-[90vw] xs:w-[100vw] md:top-[120px] xs-helper:top-[170px]">
                    <img src={HeaderImage} className="w-full" alt="header image"/>
                </div>
                </m.div>
            
            
        </m.header>
    )
}

I use Tailwind btw, i hope it’s not because of Tailwind. Thanks.

[lasjorg]

Post a repo instead.

---

I’m still not sure what it is in the images we are supposed to be looking at. Is it the colors?

I don’t really see how the button and heading text would have different colors on your phone. It seems like the two pages have different styles applied. The first image also doesn’t match the deployed site. The span inside the h1 is not black but white.

Are both images from the deployed site? If not, then it likely has nothing to do with the phone and just a code mismatch between the local and deployed code.