CSS对手机的影响不同

Question

我的布局分为两部分，占据了屏幕的50％。在中间，我有一个div抱着svg。看起来像这样：

它在Firefox的移动预览中可以正常工作，但在移动设备上看起来像这样：

我的目标是针对所有尺寸和设备的第一张图片。我的CSS：

#landing
  width: 100%
  height: 100vh
  padding: 0
  overflow-y: scroll
  overflow-x: hidden
  section
    position: absolute

  .menu
    grid-area: top
    z-index: 90000
    position: relative
    margin: 0 auto

  .imageHolder
    width: 100%
    height: 100%
    top: 0
    background-color: $red-white
    div
      size: 100%
    .heroTop
      background-color: green
    .slideOne
      position: relative
      background-color: red

  .mid
    width: 100%
    height: 100vh
    left: center
    top: 0
    z-index: 2
    .sides
      size: 50% //width and height
      left: center
      top: calc(100% - 25vw)
      z-index: 3
      .left, .right
        size: 50vw //width and height
        position: absolute
        background-color: $main-black
      .left
        left: 100%
        transform: rotate(-45deg)
      .right
        right: 100%
        transform: rotate(45deg)   
    .mainLogo
      position: relative
      left: center
      top: calc(100% - 25vw)
      padding-top: 10vw
      max-width: 1000px
      size: 30% //width and height
      z-index: 3

我的React JSX：

<section id={S.landing} className="Index">

        <section className={S.title}>
          <h1>{metaData.title}</h1>
        </section>

        <section className={S.imageHolder}>
          <div className={S.heroTop}>  </div>
          <SlideHolder heroImageTwo={heroImageTwo} />
        </section>

        <section className={S.mid}>
          <div className={S.sides}>     
            <div className={S.right}></div>
            <div className={S.left}></div>            
          </div>

          <div className={S.mainLogo}>

            <InlineSVG src={mainLogoSvg} />

          </div>          
        </section>

      </section>

关于为什么会这样的任何线索？ （请原谅我使用.sass并发布CSS）