So, my problem is that i'm trying to make this webpage responsive. And to do that, i would have to shrink two div elements at once without one going atop the other, the opposite of what it's doing right now. I tried wrapping the two div elements in one big div element, then set it's max width. But, it turned out that that didn't work, and i don't know why. Thanks so much for any answers you can provide.
my code is pasted here:
#headerMem {
text-align: center;
width:100%;
background-color: rgb(17, 17, 17);
height:15vh;
margin:0px;
line-height: 15vh;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
font-size: 50px;
color:white;
}
body {
margin:0px;
}
p {
margin:0px;
}
#mainBody {
background-color: rgb(38, 38, 38);
width:100%;
height: 900px;
}
#normMem {
width:500px;
height:75%;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
margin:5px;
box-shadow: 0px 20px black;
border:1px solid black;
color:black;
}
#normMem:active {
width:500px;
height:75%;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
margin:5px;
box-shadow: 0px 10px black;
border:1px solid black;
color:black;
transform: translateY(10px);
}
#delMem {
width:500px;
height:75%;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
border:1px solid gold;
margin:5px;
color:black;
box-shadow: 0px 20px black;
}
#delMem:active {
width:500px;
height:75%;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
border:1px solid gold;
margin:5px;
color:black;
box-shadow: 0px 10px black;
transform: translateY(10px);
}
#normMem:hover {
width:500px;
height:75%;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
margin:5px;
cursor: pointer;
color:black;
}
#delMem:hover {
width:500px;
height:75%;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
border:1px solid gold;
margin:5px;
cursor:pointer;
}
#optionsMem {
text-align: center;
background-color: rgb(33, 33, 33);
height:90px;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
color:white;
line-height: 90px;
font-size: 35px;
}
#delMemHeader {
text-align: center;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
padding:50px;
font-size: 50px;
}
#normMemHeader {
text-align: center;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
padding:50px;
font-size: 50px;
}
#normMemList {
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
font-size: x-large;
}
#delMemList {
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
font-size: x-large;
}
#normMemP {
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
font-size: large;
padding:10px;
}
#delMemP {
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
font-size: large;
padding:10px;
}
#backArrow {
transform: translate(10px, 60px);
font-size: 40px;
color:white;
cursor: pointer;
}
#priceDeluxe {
font-size: 50px;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
}
#priceNormal {
font-size: 50px;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="yearlymempage.css"/>
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=arrow_back" />
<title>Yearly Membership|cosmicgames.fun</title>
</head>
<body>
<div id="headerMem">
<p>Yearly Membership</p>
</div>
<div id="mainBody">
<a href="membershippage.html">
<span class="material-symbols-outlined" id="backArrow">
arrow_back
</span>
</a>
<div id="optionsMem">
<p>Membership Options:</p>
</div>
<a href="normalyearlymembership.htm">
<div id="normMem">
<p id="normMemHeader">Normal Membership</p>
<ul id="normMemList">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<p id="normMemP">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum praesentium qui assumenda consectetur repellat consequatur voluptatibus minus eos et, culpa, in, nihil veritatis mollitia reiciendis quas. A temporibus architecto quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id aut tenetur quo deleniti asperiores? Ut enim sunt nisi incidunt voluptatem error, earum, recusandae nam amet architecto iusto, vel esse modi.</p>
<p id="priceNormal">$29.99</p>
</div>
</a>
<a href="deluxeyearlymembership.htm">
<div id="delMem">
<p id="delMemHeader">Deluxe Membership</p>
<ul id="delMemList">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<p id="normMemP">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum praesentium qui assumenda consectetur repellat consequatur voluptatibus minus eos et, culpa, in, nihil veritatis mollitia reiciendis quas. A temporibus architecto quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id aut tenetur quo deleniti asperiores? Ut enim sunt nisi incidunt voluptatem error, earum, recusandae nam amet architecto iusto, vel esse modi.</p>
<p id="priceDeluxe">$39.99</p>
</div>
</a>
</div>
</body>
</html>any answers?
Flex will do what you want! Wrap the cards in a div. I added scrollbar, which is a great way to display on mobiles.
Also you can add this CSS @media(max-width:768px) {.wrapper-div { flex-direction: column;}} if you want it to be vertically ordered on mobile/
#headerMem {
text-align: center;
width:100%;
background-color: rgb(17, 17, 17);
height:15vh;
margin:0px;
line-height: 15vh;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
font-size: 50px;
color:white;
}
body {
margin:0px;
}
p {
margin:0px;
}
#mainBody {
background-color: rgb(38, 38, 38);
width:100%;
height: 900px;
}
#normMem {
width:500px;
height:auto;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
margin:5px;
box-shadow: 0px 20px black;
border:1px solid black;
color:black;
}
#normMem:active {
width:500px;
height:auto;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
margin:5px;
box-shadow: 0px 10px black;
border:1px solid black;
color:black;
transform: translateY(10px);
}
#delMem {
width:500px;
height:auto;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
border:1px solid gold;
margin:5px;
color:black;
box-shadow: 0px 20px black;
}
#delMem:active {
width:500px;
height:auto;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
border:1px solid gold;
margin:5px;
color:black;
box-shadow: 0px 10px black;
transform: translateY(10px);
}
#normMem:hover {
width:500px;
height:auto;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
margin:5px;
cursor: pointer;
color:black;
}
#delMem:hover {
width:500px;
height:auto;
background:linear-gradient(rgb(255, 137, 137), rgb(137, 137, 255));
border-radius: 30px;
display: inline-block;
border:1px solid gold;
margin:5px;
cursor:pointer;
}
#optionsMem {
text-align: center;
background-color: rgb(33, 33, 33);
height:90px;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
color:white;
line-height: 90px;
font-size: 35px;
}
#delMemHeader {
text-align: center;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
padding:50px;
font-size: 50px;
}
#normMemHeader {
text-align: center;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
padding:50px;
font-size: 50px;
}
#normMemList {
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
font-size: x-large;
}
#delMemList {
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
font-size: x-large;
}
#normMemP {
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
font-size: large;
padding:10px;
}
#delMemP {
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
font-size: large;
padding:10px;
}
#backArrow {
transform: translate(10px, 60px);
font-size: 40px;
color:white;
cursor: pointer;
}
#priceDeluxe {
font-size: 50px;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
}
#priceNormal {
font-size: 50px;
font-family: "Pixelify Sans", Arial, Helvetica, sans-serif;
text-align: center;
}
.wrapper-div {
display: flex;
width: 100%;
height: 75%;
max-width: 100%;
overflow: auto;
flex-wrap: nowrap;
} <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="yearlymempage.css" />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,[email protected],100..700,0..1,-50..200&icon_names=arrow_back" />
<title>Yearly Membership|cosmicgames.fun</title>
</head>
<body>
<div id="headerMem">
<p>Yearly Membership</p>
</div>
<div id="mainBody">
<a href="membershippage.html">
<span class="material-symbols-outlined" id="backArrow"> arrow_back </span>
</a>
<div id="optionsMem">
<p>Membership Options:</p>
</div>
<div class="wrapper-div">
<a href="normalyearlymembership.htm">
<div id="normMem">
<p id="normMemHeader">Normal Membership</p>
<ul id="normMemList">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<p id="normMemP">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum praesentium qui assumenda consectetur repellat consequatur voluptatibus minus eos et, culpa, in, nihil veritatis mollitia reiciendis quas. A temporibus architecto quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id aut tenetur quo deleniti asperiores? Ut enim sunt nisi incidunt voluptatem error, earum, recusandae nam amet architecto iusto, vel esse modi.</p>
<p id="priceNormal">$29.99</p>
</div>
</a>
<a href="deluxeyearlymembership.htm">
<div id="delMem">
<p id="delMemHeader">Deluxe Membership</p>
<ul id="delMemList">
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
<li>Lorem ipsum dolor sit amet.</li>
</ul>
<p id="normMemP">Lorem ipsum, dolor sit amet consectetur adipisicing elit. Earum praesentium qui assumenda consectetur repellat consequatur voluptatibus minus eos et, culpa, in, nihil veritatis mollitia reiciendis quas. A temporibus architecto quis. Lorem ipsum dolor sit amet consectetur adipisicing elit. Id aut tenetur quo deleniti asperiores? Ut enim sunt nisi incidunt voluptatem error, earum, recusandae nam amet architecto iusto, vel esse modi.</p>
<p id="priceDeluxe">$39.99</p>
</div>
</a>
</div>
</div>
</body>
</html>