CODEWITHSUNDEEP
responsive-designnext.jsmedia-queriesmobile-websitechakra-ui
inferno 080
inferno 080

Reputation: 19

Website renders like desktop on mobile, only when first loaded or is refreshed

I have created a website that uses media queries and is responsive when tested from the Dev tools in browser. However it reverts back to its desktop-like state on reloading. If i click on a link that redirects me to another page, it is displays the second page perfectly as expected. Same for when i go "back". The homepage is now magically responsive.

[View the issue : ]https://reach-tech-interns-page1.vercel.app/

Upon opening on mobile, this link doesn't seem responsive. But click on testimonials and go back, and the homepage is now responsive. If I reload, the mobile site breaks again.

I used Next.js and Chakra UI.

[Github Code:] https://github.com/inferno080/Reach-Tech-Interns-Page

Upvotes: 0

Views: 1516

Answers (1)

inferno 080
inferno 080

Reputation: 19

The issue was with Chakra UI's useMediaQuery() hook. Writing a custom hook solved this issue


const useMediaQuery = (query) => {
  const [matches, setMatches] = useState(false);

  useEffect(() => {
    const media = window.matchMedia(query);
    if (media.matches !== matches) {
      setMatches(media.matches);
    }
    const listener = () => setMatches(media.matches);
    window.addEventListener("resize", listener);
    return () => window.removeEventListener("resize", listener);
  }, [matches, query]);

  return matches;
}

export default useMediaQuery;

Upvotes: 1

Related Questions