在使网站更具响应性方面需要帮助

Question

I am trying to learn how to make my website ( https://noel.dog/ ) more responsive. At the moment when I go on mobile there is a white background that shows. I am trying to make it so as I decrease the page size, the boxes stack vertically instead of horizontally.

 .boxes { display: flex; position: absolute; top: 50%; left: 50%; cursor: none; transform: translate(-50%, -50%); }.box { width: 150px; height: 170px; padding: 50px; margin: 30px; background-color: #090c0cfa; border: 1px solid #fe712f; border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 3px; }.box:hover { border: 1px solid #fe712f; background-color: rgba(254, 106, 47, 0.03); }

 <div class="boxes"> <div class="box" id="Unwarmed" data-tilt data-tilt-glare data-tilt-max-glare="0.1"> <h1>Unwarmed Gmails</h1> <button class="details" type="button" onclick="run1()">View details</button> <button class="purchase" onclick="purchase1()">Purchase</button> </div> <div class="box" id="Oneclick" data-tilt data-tilt-glare data-tilt-max-glare="0.1"> <h1>Oneclick Gmails</h1> <button class="details" type="button" onclick="run2()">View details</button> <button class="purchase" onclick="purchase1()">Purchase</button> </div> <div class="box" id="Warmed" data-tilt data-tilt-glare data-tilt-max-glare="0.1"> <h1>Warmed Gmails</h1> <button class="details" type="button" onclick="run3()">View details</button> </div>

Answer 1

Adding flex-direction:column; changes the orientation of the boxes.

 .boxes { display: flex; flex-direction:column; position: absolute; top: 50%; left: 50%; cursor: none; transform: translate(-50%, -50%); }.box { width: 150px; height: 170px; padding: 50px; margin: 30px; background-color: #090c0cfa; border: 1px solid #fe712f; border: 1px solid rgba(255, 255, 255, 0.03); border-radius: 3px; }.box:hover { border: 1px solid #fe712f; background-color: rgba(254, 106, 47, 0.03); }

 <div class="boxes"> <div class="box" id="Unwarmed" data-tilt data-tilt-glare data-tilt-max-glare="0.1"> <h1>Unwarmed Gmails</h1> <button class="details" type="button" onclick="run1()">View details</button> <button class="purchase" onclick="purchase1()">Purchase</button> </div> <div class="box" id="Oneclick" data-tilt data-tilt-glare data-tilt-max-glare="0.1"> <h1>Oneclick Gmails</h1> <button class="details" type="button" onclick="run2()">View details</button> <button class="purchase" onclick="purchase1()">Purchase</button> </div> <div class="box" id="Warmed" data-tilt data-tilt-glare data-tilt-max-glare="0.1"> <h1>Warmed Gmails</h1> <button class="details" type="button" onclick="run3()">View details</button> </div>

Answer 2

Just a little suggestion cause you already got the answer. Try using percentages when you are working with padding or width or vw(view width). You'll know when you implement these things. Hope I could help.