Ok so I have a responsive grid, and im trying to figure out how I can make certain squares line up, or be placed in different positions, on certain Reponses. I am wanting to mimic these photos EXACTLY: Desktop version Tablet Version Mobile Version. Each one of these squares I have written a number on it. On the desktop version, the number is just a designation for each square for easy review. On the mobile and tablet version these numbers represent what number the said square is on the desktop version. Although I have created a responsive grid, I have NO IDEA how to go about rearranging said grid for mobile and tablet.
Also something I would like help with is my button. I am wanting it to be centered in its designated square and of course I want it to be responsive as well. At this time it is not scaling with the grid.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style media="screen">
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
text-align: left;
color: white;
font-size: 14px;
font-family: Open Sans, sans-serif;
}
.grid>div {
background: #a100ff;
padding: 1em;
}
.grid>div:nth-child(odd) {
background: #ff00c3;
}
.button {
border: none;
color: white;
padding: 16px 50px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 14px;
margin: 4px 2px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 12px;
position: center;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
position: absolute;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
/* TABLET VIEW */
@media only screen and (max-width: 1279px) {
.grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
text-align: left;
color: white;
font-size: 14px;
font-family: Open Sans, sans-serif;
}
}
/* MOBILE VIEW */
@media only screen and (max-width: 759px) {
.grid {
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-column-gap: 1em;
grid-row-gap: 1em;
text-align: left;
color: white;
font-size: 14px;
font-family: Open Sans, sans-serif;
}
}
</style>
</head>
<body>
<div class="grid">
<!-- CLASS NUMBER READ LEFT TO RIGHT FROM DESKTOP VIEW -->
<div class="1">
<p class="quote">"Lingerie is not about seducing men;
It's about embracing womanhood"<br><br> - Dita Von Teese (BOX 1)</p>
</div>
<div class="2">
<p>Image goes here, delete this text (BOX 2)</p>
<img src="" alt="">
</div>
<div class="3">
<p>Image goes here, delete this text (BOX 3)</p>
<img src="" alt="">
</div>
<div class="4">
<p>Image goes here, delete this text (BOX 4)</p>
<img src="" alt="">
</div>
<div class="5">
<p>Image goes here, delete this text (BOX 5)</p>
<a class="button button2" href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a>
</div>
<div class="6">
<p>Image goes here, delete this text (BOX 6)</p>
<img src="" alt="">
</div>
<div class="7">
<p>Image goes here, delete this text (BOX 7)</p>
<img src="" alt="">
</div>
<div class="8">
<p>Image goes here, delete this text (BOX 8)</p>
<img src="" alt="">
</div>
<div class="9">
<p>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the
only subscription that gets unwrapped TWICE!"<br><br> Wendy S. (BOX 9)</p>
</div>
</div>
</body>
</html>A few points before the solution:
I think naming CSS classes with just as number is very bad practice (you have then to use the CSS selector in this way only [class="1"]{} or it won't work with simple .1 {}). We can be a little bit more descriptive than that with a CSS naming convention like "box-1", "image1", "grid-child-1" (or BEM or whatever you prefer).
You don't have to repeat the same CSS declarations in the media query (e.g setting the same font-size every media query), unless you need to override such declarations (for example: in divs, in mobile font-size 11px and desktop 14px).
To center the box I have used CSS Flexbox and removed the position absolute.
I am not sure about how your answer is going to be helpful to the public when your mockup images that you linked will be removed from the image hosting servers.
We should try to write the schema of your mockups, so that people in the future can understand your question and the answers.
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title></title>
<style media="screen">
.grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
grid-gap: 1em;
grid-auto-rows: 1fr;
text-align: left;
color: white;
font-size: 14px;
font-family: Open Sans, sans-serif;
}
.grid>div {
background: #a100ff;
padding: 1em;
}
.grid>div:nth-child(odd) {
background: #ff00c3;
}
.button {
border: none;
color: white;
padding: 16px 50px;
text-align: center;
text-decoration: none;
font-size: 14px;
transition-duration: 0.4s;
cursor: pointer;
border-radius: 12px;
}
.box-5 {
display: flex;
flex-direction: column;
align-items: center;
}
.button2 {
background-color: white;
color: black;
border: 2px solid #008CBA;
}
.button2:hover {
background-color: #008CBA;
color: white;
}
/* TABLET VIEW */
@media only screen and (min-width: 759px) and (max-width: 1279px) {
.grid {
grid-template-columns: repeat(2, 1fr);
text-align: left;
grid-gap: 0;
}
.grid>div {
height: 100%;
}
.box-2,.box-6, .box-7 {
display: none;
}
.box-8 {
grid-column: 2;
grid-row: 3;
}
.box-9 {
grid-column: 1;
}
}
/* MOBILE VIEW */
@media only screen and (max-width: 759px) {
.grid {
grid-template-columns: 1fr 1fr;
text-align: left;
grid-gap: 0;
}
.box-1 {
grid-row: 3;
grid-column: 1/3;
}
.box-2 {
grid-row: 2;
grid-column: 1;
}
.box-3 {
grid-row: 2;
grid-column: 2;
}
.box-5 {
grid-row: 1;
grid-column: 1/3;
}
.box-7, .box-8, .box-9 {
display: none;
}
}
</style>
</head>
<body>
<div class="grid">
<!-- CLASS NUMBER READ LEFT TO RIGHT FROM DESKTOP VIEW -->
<div class="box-1">
<p class="quote">"Lingerie is not about seducing men;
It's about embracing womanhood"<br><br> - Dita Von Teese (BOX 1)</p>
</div>
<div class="box-2">
<p>Image goes here, delete this text (BOX 2)</p>
<img src="" alt="">
</div>
<div class="box-3">
<p>Image goes here, delete this text (BOX 3)</p>
<img src="" alt="">
</div>
<div class="box-4">
<p>Image goes here, delete this text (BOX 4)</p>
<img src="" alt="">
</div>
<div class="box-5">
<p>Image goes here, delete this text (BOX 5)</p>
<a class="button button2" href="https://www.subbly.co/checkout/buy/112646">Take Style Quiz</a>
</div>
<div class="box-6">
<p>Image goes here, delete this text (BOX 6)</p>
<img src="" alt="">
</div>
<div class="box-7">
<p>Image goes here, delete this text (BOX 7)</p>
<img src="" alt="">
</div>
<div class="box-8">
<p>Image goes here, delete this text (BOX 8)</p>
<img src="" alt="">
</div>
<div class="box-9">
<p>"My wife and I absolute LOVE our SeductiveBox subscription! This bring more excitement to our love life. Plus this is the
only subscription that gets unwrapped TWICE!"<br><br> Wendy S. (BOX 9)</p>
</div>
</div>
</body>
</html>