CODEWITHSUNDEEP
javascripthtmlcss
Killboe
Killboe

Reputation: 19

Need help on making website more responsive

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>

Upvotes: 0

Views: 57

Answers (2)

Jeet
Jeet

Reputation: 795

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.

Upvotes: 1

Scott Marcus
Scott Marcus

Reputation: 65883

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>

Upvotes: 1

Related Questions