css displaying inconsistently on Mi Browser mobile view

Everything looks great in Chrome (mobile), but for some reason when I test it out on Mi Browser, the CSS isn't displaying correctly.

I'm working with Next.js and here's a snippet from my head tag:

<Head>
<meta charSet="UTF-8" />
<title>Nutryin</title>
<meta
  name="viewport"
  content="width=device-width; initial-scale=1.0;"
/>
<link rel="preconnect" href="https://fonts.gstatic.com" />
<link
  href="https://fonts.googleapis.com/css2?family=Dosis:wght@400;500&display=swap"
  rel="stylesheet"
/>
</Head>

Check out my website:

Here's how it looks on Chrome: https://i.sstatic.net/5nJ8P.jpg

And this is what it looks like on Mi Browser: https://i.sstatic.net/ZbZNh.jpg

htmlcssnext.jsmobile-browserxiaomi

Answer №1

Make sure to verify if the CSS functions you are using are supported by the Mi browser. You can visit websites like W3Schools to check if your browser and its version support the CSS functions you are utilizing.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Position the middle character within a span that has the identical width and height

My goal is to align characters in the center of a span. CSS span{border-radius:10px; width:20px; height:20px; color:#fff; background:#cc0000; text-align:center; line-height:20px; display:block;} HTML <span>+</span><br> <span>-&l ...

htmlcss

The exported NextJS URL isn't functioning properly

Recently, I delved into the world of Next JS by following a tutorial on YouTube by Brad Traversy. In his guidance, I used next export to export the program and ran it using serve -s out -p 8000. While the page loads perfectly on localhost:8000, the issue a ...

javascriptnode.jsreactjsnext.js

I recently implemented a delete function in my code that successfully removes a row, but now I am looking to also delete the corresponding data from localStorage in JavaScript

I have successfully implemented a delete function in JavaScript that deletes rows, but I also want to remove the data from local storage. This way, when a user reloads the page, the deleted row will not appear. The goal is to delete the data from local s ...

javascripthtmljavascript-objects

Icons in Semantic-UI: Facing Difficulty in Accessing ("CORS Request Not HTTP"

Here's an example I'm working on: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Understanding - Main</title> <link rel="stylesheet" type="text/css" href="../semantic/dist/semanti ...

javascriptphphtmlcorssemantic-ui

Firebase is displaying an error when using onSnapshot, specifically when a value is being waited on from an

Currently, I am working on an application where I am categorizing posts and users based on a specific room ID. I am adding a roomid property to both the user and every post. However, when attempting to fetch all posts belonging to a particular room ID, I e ...

firebasefirebase-realtime-databasenext.jsfirebase-authentication

The Link tag in the Hero.jsx file of Next.js is malfunctioning and failing to redirect to the intended URL

Having a problem with the button in my Hero.jsx component, part of the Page.js implementation. The button uses a Link tag to redirect to the url.js page, but it's not working as expected and showing an Error 404 page instead. I'm new to Next.js s ...

javascriptreactjsnext.jsjsxnext.js13

Is the CSS scale activated by mouseover or click?

My CSS code successfully scales images, but the issue is that it affects every image on the page. I am looking for a solution to apply this CSS only when the user hovers over or clicks on an image. The challenge is that images are added by non-technical w ...

javascriptcss

Adjusting the size of an image based on the size of the window

I'm currently working on my first website project. I have successfully implemented a large image banner, however, I am facing an issue with setting its height. Whenever I try to adjust the height using percentage values, the banner disappears. My goal ...

htmlcssimage

Using Next.js 13 for authentication between server-side components and a separate backend

Looking for guidance on how to execute API requests from Nextjs 13 to a separate Python backend. I am faced with two different scenarios: API request made from client-side component API request made from server-side component When the request originates ...

next.jsnext.js13clerk

What is the process for locating and displaying a database in WordPress?

I seem to be facing a challenge when it comes to developing a new functionality since I am relatively new to both WordPress and web development. My current goal is to incorporate a search feature into my project. The idea is that when a user enters a sea ...

phphtmlmysqlwordpress

The application of CSS transition fails in the context where top property is set as auto

I have been exploring an online tutorial that almost met my requirements. However, I encountered a challenge with the CSS 'transitions' effects. Basically, I need the text to be positioned at a specific distance from the top because the title wi ...

htmlcsscss-transitions

I can't seem to figure out why this file upload error is happening. What could be the

Having trouble with a simple file upload function and keep getting an "Error" message when trying to use it. Here's my HTML file: <form enctype='multipart/form-data' action='upload.php'> <input type='file' name ...

phphtml

jQuery Mobile panel buttons are functioning properly within a maximum width of 300 pixels

I have constructed a panel that adjusts its size based on the device's screen using responsive design techniques. The code for this panel is as follows: <div data-role="panel" data-position="right" data-display="overlay" data-theme="a" id="add-for ...

jqueryhtmlcssjquery-mobilejquery-mobile-panel

Loop through the elements of a class in JavaScript and choose all except for the one that was

Imagine having 5 div elements, each with a similar onclick-function that hides the other divs when clicked. HTML: <div id="1" class="divs" onclick="hide()"></div> <div id="2" class="divs" onclick="hide()"></div> <div id="3" cla ...

javascripthtmlcss

The following divs are adjacent to each other, with their widths set in percentages, and the paddings

I successfully transformed divs into a column of tables. However, now I am looking to add some padding between the divs. When I attempt to do so like this: <div style="float:left; width:100%;"> <?php foreach ($datas as $rec) { ?> <div ...

csshtml

The error message "TypeError: (0 , N.createContext) is not a function" indicates that

I'm currently in the process of developing a cutting-edge application using Next.js 14, TypeScript, and Telegram Open Network. However, I've hit a roadblock while attempting to incorporate the TONConnectUIProvider at the root of my app. Upon run ...

reactjstypescriptnext.jsnext.js14ton

Creating a vertical scrolling marquee to showcase a list in React - step by step guide

Trying to create a marquee effect that displays a list of items in a vertical auto-scroll. After reaching the end of the list, I want it to loop back to the beginning seamlessly for continuous animation. The code snippet below shows my progress so far - a ...

htmlcssreactjsfrontendmarquee

Tips for instructing Vimeo on the recommended video dimensions for responsive delivery

Embedding Vimeo's iframe in a responsive way is quite straightforward, allowing the player to adjust its size accordingly. However, the real question is: Does Vimeo actually deliver the video in the correct size? In the past, I mistakenly assumed th ...

htmlresponsive-designvimeo-player

How to Retrieve a Document with a Map Field in Firestore

Can someone please guide me on how to access the key-value pair in a field in Firestore using Next.js and specifically for isReferralAvailable? I have a key TESTER1 with a boolean value of true that I would like to display in either a table or just console ...

firebasegoogle-cloud-firestorenext.jskey-value

Encountering a Keycloak Sign In Issue with NextAuth in a Next.js Application [next-auth][error][SIGNIN_OAUTH_ERROR]

Hey there, I'm currently in the process of setting up authentication for my Next.js application using NextAuth and Keycloak. Even though I've followed the documentation closely, I've hit a roadblock when trying to sign in with Keycloak. Her ...

javascriptreactjsauthenticationnext.jskeycloak-connect