Chrome设备模式看起来与实际设备不同

Question

我不知道CSS样式发生了什么。 输入网格的宽度溢出。 在chrome设备模式下，一切看上去都很不错，但在实际设备上却没那么好...

我真的不知道我写的CSS有什么问题。

任何帮助都可以...我一无所知。

以前样式还不错，我不知道发生了什么。

import styled from "styled-components";

export const DetailsContainer = styled.div`
  display: flex;
  justify-content: center;
  flex-direction: column;
  width: 50%;
  margin-bottom: 20px;

  @media screen and (max-width: 800px) {
    width: 100%;
  }
`;

export const StaticDetailsContainer = styled.img`
  width: 100%;
`;

export const FormContainer = styled.div`
  width: 90%;
  margin: auto;

  form {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: repeat(2, 1fr);
    grid-column-gap: 10px;
    grid-row-gap: 10px;
  }
`;

export const ButtonContainer = styled.button`
  background-color: #2eaaa7;
  color: white;
  font-family: arial, sans-serif;
  font-size: 20px;
  width: 60%;
  height: 40px;
  border: none;

  @media screen and (max-width: 800px) {
    font-size: 15px;
    overflow: hidden;
  }
`;

import React from "react";
import FormInput from "../FormInput/FormInput";
import {
  ButtonContainer,
  DetailsContainer,
  StaticDetailsContainer,
  FormContainer
} from "../Details/Details-styles";
import staticDetails from "../../assets/details-static.png";

class Details extends React.Component {
  state = {
    firstName: "",
    lastName: "",
    email: "",
    phone: ""
  };

  handleSubmit = event => {
    event.preventDefault();
    const { email, phone, firstName, lastName } = this.state;
    console.log(email, phone, firstName, lastName);
    //submit to server
    this.props.handleUIOnSubmit();
  };

  handleChange = event => {
    const { value, name } = event.target;
    this.setState({ [name]: value });
  };

  render() {
    return (
      <DetailsContainer>
        <StaticDetailsContainer src={staticDetails} />
        <FormContainer>
          <form onSubmit={this.handleSubmit}>
            <FormInput
              name="lastName"
              type={"text"}
              placeholder="שם משפחה"
              value={this.state.lastName}
              handleChange={this.handleChange}
            />
            <FormInput
              name="firstName"
              type="text"
              placeholder={"שם פרטי"}
              value={this.state.firstName}
              handleChange={this.handleChange}
            />
            <FormInput
              name="phone"
              type="phone"
              placeholder={"טלפון"}
              value={this.state.phone}
              handleChange={this.handleChange}
            />
            <FormInput
              name="email"
              type="email"
              placeholder={'דוא"ל'}
              value={this.state.email}
              handleChange={this.handleChange}
            />
            <ButtonContainer type="submit">תאם לי שיעור</ButtonContainer>
          </form>
        </FormContainer>
      </DetailsContainer>
    );
  }
}

export default Details;

这是在Chrome设备模式下的样子：

这是实际设备上的情况：

这是过去的样子：

谢谢！

解决方案是删除我在index.html中添加的一些链接。