调整弹出框大小 - React

如何解决调整弹出框大小 - React

你好 Stackoverflow 社区。我正在使用当用户单击图片时打开的 react-popupBox。但是，对于大多数移动应用程序，这些框无法正确调整大小。我的代码如下：

Portfolio.js

 const openPopupBoxfitnesstracker = () => {
    const content = (
    <>
    <img className="portfolio-image-popupBox" src={fitnesstracker} alt="fitnesstracker"/>
    <p>
<br></br>
<br></br>
This app has been created with the intention to be able to view create and track daily workouts. The user will be able to log multiple exercises in a workout on a given day.
 The user will also be able to track the name,type,weight,sets,reps,and duration of exercise.
  If the exercise is a cardio exercise,the user will be able to track their distance traveled.
  <br></br>
  Tools: Express,MongoDB,NodeJS,JSON
    </p>
    <b>Demo: </b> <a className="hyper-link" onClick={() => window.open("https://fitnesstracker808.herokuapp.com/exercise?id=60b84fdcf99be00015ab65f6","_blank")}>https://fitnesstracker808.herokuapp.com/exercise?id=60b84fdcf99be00015ab65f6</a>
    <br></br>
    <b>GitHub: </b> <a className="hyper-link" onClick={() => window.open("https://github.com/Rinzler8806/fitnessTracker")}>https://github.com/Rinzler8806/fitnessTracker</a>
    </>
    )
    PopupBoxManager.open({content});
    PopupBoxManager.update({
      content,config: {
        titleBar: {
          text: "fitness Tracker",},});
  }

  const popupBoxConfigfitnesstracker = {
    titleBar: {
      enable: true,text: "fitness Tracker"
    },fadeIn: true,fadeInSpeed: 500
  }

CSS

/*POPUPBox*/
    .portfolio-image-popupBox {
      width: 45rem;
      padding: 0 0.5rem;
    }
    
    .hyper-link {
      cursor: pointer;
      color: var(--primary-blue);
    }
    
    .hyper-link:hover {
      color: var(--primary-purple);
    }
    
    /*MEDIA*/
    
    @media(max-width: 768px) {
      .portfolio-image-popupBox {
        width: 100%;
    }
    }
    
    @media(max-height: 570px) {
    .popupBox-wrapper {
      height: 100%;
    }
    
      .portfolio-image-popupBox {
        width: 50%;
    }
    }
    
    @media(max-height: 570px) {
      .popupBox-content {
        height: 100%;
      }
      
        .portfolio-image-popupBox {
          width: 100%;
      }

  }

  @media(max-height: 280px) {
    .popupBox-wrapper {
      height: 90%;
    }
    
      .portfolio-image-popupBox {
        width: 30%;
    }
    }

不同的媒体样式应该有助于调整大小，但是这些都没有按预期工作，在玩了多种不同的设置后，我也无法让它们按预期工作。我的其余代码可以在下面找到：

https://github.com/Rinzler8806/reactPortfolio/tree/master/src

任何帮助将不胜感激！