How to debug device-specific (Pixel 7) CSS design issues persisting only on production?

General
1

I Have a Node.js based url shortening GitHub project deployed on vercel and Its been a while I’ve been facing a discrepancy in the CSS design e.g: HTML table and body elements on the Pixel 7 device using Brave browser.

The iPhone and other android devices running Safari, Brave and Chrome work as expected
I cleared the browser’s cache and site data but to no avail.
Everything was in-place and fine when I ran the project locally from my ip and port on the Pixel 7.

What am i missing?

2

There could be several reasons why your CSS design is not displaying correctly on the Pixel 7 using Brave browser:

1. Media Queries:

  • Ensure your media queries are targeting the correct screen sizes and orientations.
  • Check if the Pixel 7’s dimensions are correctly defined in your media queries.
  • Try adding a specific media query for the Pixel 7’s device type or resolution.

2. Browser-Specific Styles:

  • Some CSS properties or values might be rendered differently in Brave compared to other browsers.
  • Use browser-specific prefixes (e.g., -webkit- , -moz- ) for properties that are not yet standardized.
  • Consider using a CSS reset or normalization library to ensure consistent styling across different browsers.

3. Vercel Configuration:

  • Check if there are any specific configuration settings in your Vercel project that might be affecting the CSS rendering.
  • Review the Vercel documentation for any known issues or recommendations related to CSS styling.

4. Pixel 7-Specific Issues:

  • There might be known bugs or quirks in the Pixel 7’s Brave browser that are causing the CSS to render incorrectly.
  • Search online forums or communities for any reported issues related to CSS rendering on the Pixel 7.

5. CSS Debugging Techniques:

  • Use browser developer tools to inspect the CSS rules being applied to the elements.
  • Check for conflicting styles or missing properties.
  • Try disabling extensions or plugins in Brave to see if they are interfering with the CSS.

6. Test on Different Pixel 7 Devices and Browsers:

  • Test your project on different Pixel 7 devices or try using a different browser (e.g., Chrome) to see if the issue persists.
  • This can help narrow down the cause of the problem.

By following these steps and carefully inspecting your CSS and browser configuration, you should be able to identify and resolve the issue causing the discrepancy in the CSS design on the Pixel 7 using Brave browser.