Reputation: 19
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
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
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