CSSレスポンシブデザインができない

実現したいこと

前提

HTML/CSSでwebアプリの画面を作っています。
パソコンやiPadを使ってプログラミングをしています。
Githubでコードを書き、live Server で実行画面を見ています。

発生している問題

プログラミングをする端末によって四角や丸などの要素の位置が変わっていて、画面外に出たり、横長になっていたり、重なっていたりします。
(画像はiPadの縦画面）

試したこと

・メディアクエリを記述する。
・vwや％で配置する

HTML

12<link rel="stylesheet" type="text/css" href="timer/index.css"> 3<div class="table"> 4 <div class="circle" id="game"> 5 <a href="../game/"> 6 <p id="circleText">ミニゲーム</p> 7 </a> 8 </div> 9 10 <!--ここの行に学習時間が代入されます--> 11 <div class="square5" id="time">time</div> 12 13 <div class="square1"> 14 <p id="squareText">家</p> 15 </div> 16 <div class="square2"> 17 <p id="squareText">通学中</p> 18 </div> 19 <div class="square3" id="start"> 20 <p id="squareText">スタート</p> 21 </div> 22 <div class="square4" id="stop"> 23 <p id="squareText">ストップ</p> 24 </div> 25</div> 26

CSS

12/* ミニゲーム */3.circle {4 width: 17vw;5 height: 11vw;6 background-color: #82afa1;7 border-radius: 50%;8 margin-left: 75vw;9 transform: translate(-50%, -330%);10 border: 0.5px solid #5b776e; /* 縁取りの色と太さを指定 */11}12 13#circleText {14 font-size: 3vw;15 font-weight: bold;16 margin-top: 2vw;17}18 19/* 家 */20.square1 {21 width: 32vw;22 height: 13vw;23 background-color: #4d8067e0;24 border-radius: 10px; /* 角を丸める */25 position: absolute;26 top: 30%; /* 上端を画面の中央に配置 */27 left: 50%; /* 左端を画面の中央に配置 */28 transform: translate(-105%, -220%); /* 中央に配置 */29 border: 1px solid #305040e0;30}31 32.square1 p {33 font-size: 7.5vw;34 text-align: center;35}36 37/* 通学中 */38.square2 {39 width: 32vw;40 height: 13vw;41 background-color: #4d8067e0;42 border-radius: 10px; /* 角を丸める */43 position: absolute;44 top: 30%;45 left: 50%;46 transform: translate(-4%, -220%);47 border: 1px solid #305040e0;48}49 50.square2 p {51 font-size: 7.5vw;52 text-align: center;53}54 55/* スタート */56.square3 {57 width: 32vw;58 height: 16vw;59 background-color: #4d8067e0;60 border-radius: 10px; /* 角を丸める */61 position: absolute;62 top: 30%;63 left: 50%;64 transform: translate(-105%, 50%);65 border: 1px solid #305040e0;66}67 68.square3 p {69 font-size: 6.5vw;70 text-align: center;71 margin: 10px;72}73 74/* ストップ */75.square4 {76 width: 32vw;77 height: 16vw;78 background-color: #4d8067e0;79 border-radius: 10px;80 position: absolute;81 top: 30%;82 left: 50%;83 transform: translate(-4%, 50%);84 border: 1px solid #305040e0;85}86 87.square4 p {88 font-size: 6.5vw;89 text-align: center;90 margin: 10px;91}92 93/* タイマー */94.square5 {95 width: 80vw;96 height: 20vw;97 background-color: #1c382ae0;98 position: absolute;99 top: 50%;100 left: 50%;101 transform: translate(-50%, -70%);102 border-radius: 0;103 border: 2px solid #14271de0;104}105