So this is my code for a responsive website that I am currently creating, it works fine in the mobile version but as you can see, inside the
@media property
where I am trying to move my image to the right side of the image container ( the red border container) but I am not able to do it, can someone please help me or tell me where is it that I'm mistaking the code.
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend Deca&display=swap");
body {
background-color: hsl(233, 47%, 7%);
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 800px;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
margin: 70px 30px;
box-shadow: 0 0 10px black;
}
.image_container {
width: 300px;
height: auto;
}
.image {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
mix-blend-mode: soft-light;
}
.text-container {
align-self: center;
text-align: center;
}
h1,
article {
font-family: "Inter", sans-serif;
padding: 0px 15px;
}
h1 {
padding-top: 10px;
color: white;
font-weight: 700;
}
.insights {
color: hsl(277, 64%, 61%);
}
article {
color: hsla(0, 0%, 100%, 0.75);
}
.stats_container {
align-content: center;
text-align: center;
display: block;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 35px;
display: block;
padding-top: 25px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
@media only screen and (min-width: 1224px) {
.card {
width: 1040px;
height: 450px;
align-self: center;
}
.image_container {
border: 1px red solid;
width: 1040px;
height: 450px;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
}
.image {
width: 50%;
height: 100%;
align-self: flex-end;
mix-blend-mode: soft-light;
}
}<DOCTYPE! html>
<html lang="en">
<head>
<link href="firstproject.css" rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<div class="card">
<div class="image_container">
<img class="image" alt="main.jpg" src="image-header-desktop.jpg">
</div>
<div class="text-container">
<h1>Get <span class="insights">insights</span> that help your buisness grow</h1>
<article>Discover the benfits of data analyitcs and make better decision regarding revenue, customer experience, and overall efficiency.</article>
</div>
<div class="stats_container">
<section class="stats">
<div class="companies"><span class="num1">10k </span>
<span class="stats_heading">companies</span></div>
<div class="templates"><span class="num1">314</span>
<span class="stats_heading">Templates</span></div>
<div class="queries"><span class="num1">12M </span>
<span class="stats_heading">queries</span></div>
</section>
</div>
</div>
</div>
</body>
</html>CodePudding user response：
I have made some changes in your code.
- I have wrap texts inside text-wrapper div.
- I applied
display:flex;to .card.
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Lexend Deca&display=swap");
body {
background-color: hsl(233, 47%, 7%);
height: 100%;
}
.container {
display: flex;
justify-content: center;
align-items: center;
}
.card {
width: 300px;
height: 800px;
background-color: hsl(244, 38%, 16%);
border-radius: 10px;
margin: 70px 30px;
box-shadow: 0 0 10px black;
}
.image_container {
width: 300px;
height: auto;
}
.image {
width: 100%;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
mix-blend-mode: soft-light;
}
.text-container {
align-self: center;
text-align: center;
}
h1,
article {
font-family: "Inter", sans-serif;
padding: 0px 15px;
}
h1 {
padding-top: 10px;
color: white;
font-weight: 700;
}
.insights {
color: hsl(277, 64%, 61%);
}
article {
color: hsla(0, 0%, 100%, 0.75);
}
.stats_container {
align-content: center;
text-align: center;
display: block;
}
.num1 {
color: white;
font-family: "Lexend Deca", sans-serif;
font-weight: 400;
font-size: 35px;
display: block;
padding-top: 25px;
}
.stats_heading {
color: hsla(0, 0%, 100%, 0.6);
font-family: "Lexend Deca", sans-serif;
text-transform: uppercase;
}
@media only screen and (min-width: 1224px) {
.card {
display:flex;
width: 1040px;
height: 450px;
align-self: center;
}
.image_container {
order:2;
border: 1px red solid;
width: 1040px;
height: 450px;
flex-direction: row;
justify-content: flex-end;
align-content: flex-end;
}
.image {
width: 100%;
height: 100%;
mix-blend-mode: soft-light;
}
}<div class="container">
<div class="card">
<div class="image_container">
<img class="image" alt="main.jpg" src="https://images.indianexpress.com/2020/08/Fujifilm-FB.jpg">
</div>
<div class="text-wrapper">
<div class="text-container">
<h1>Get <span class="insights">insights</span> that help your buisness grow</h1>
<article>Discover the benfits of data analyitcs and make better decision regarding revenue, customer experience, and overall efficiency.</article>
</div>
<div class="stats_container">
<section class="stats">
<div class="companies"><span class="num1">10k </span>
<span class="stats_heading">companies</span></div>
<div class="templates"><span class="num1">314</span>
<span class="stats_heading">Templates</span></div>
<div class="queries"><span class="num1">12M </span>
<span class="stats_heading">queries</span></div>
</section>
</div>
</div>
</div>
</div>