Media query on image - html

Question

I want to transform the main to display:column when max-width:1220px.
And I'm doing this
#media (max-width: 1220px) {
.main {
flex-direction: column;
}
But when the width it's 1220px the image desapear.
What I am doing wrong?
This is the Code Pen link to be easier.
https://codepen.io/Rvssco/pen/LYzGYgV
Thank you in advance!

Answer 1

The image is disappearing because you have included the src of the image in CSS and not html, flex-direction is not able to detect the presence of image when changing direction and hence the image doesn't appear. You can see my code how I have done it.
body {
background-color: hsl(233, 47%, 7%);
color: white;
}
h1,
p {
margin: 0;
}
h1 {
font-family: "Lexend Deca", sans-serif;
}
.desc {
font-family: "Inter", sans-serif;
font-weight: 400;
color: hsla(0, 0%, 100%, 0.75);
}
span {
color: hsl(277, 64%, 61%);
}
.wrap {
height: 98vh;
width: 98vw;
display: flex;
justify-content: center;
align-items: center;
}
.main {
display: flex;
width: 85%;
height: 80%uto;
border-radius: 10px;
background-color: hsl(244, 38%, 16%);
flex-direction: row;
}
.left {
padding: 5rem;
padding-right: 0;
display: flex;
flex-direction: column;
width: 50%;
}
.text-container .title {
margin-bottom: 2rem;
font-size: 2.5rem;
font-weight: 600;
}
.desc {
margin-bottom: 5rem;
line-height: 1.5rem;
word-spacing: 0.3rem;
font-family: "Inter", sans-serif;
}
.stats-desc {
font-family: "Inter", sans-serif;
color: hsla(0, 0%, 100%, 0.6);
}
.stats-container {
display: flex;
justify-content: space-between;
font-size: 15px;
width: 70%;
}
.right {
width: 50%;
/* background-image: url(./1.png); */
background-size: cover;
background-repeat: no-repeat;
}
.stats h1 {
font-family: "Inter", sans-serif;
}
.filter {
height: 100%;
width: 100%;
background-color: hsla(277, 88%, 32%, 0.603);
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}
.left {
text-align: center;
}
#media (max-width: 1000px) {
.main {
/* display: block; */ /* Option 2*/
flex-direction: column-reverse;
background-color:red; /*Used for testing please remove*/
}
.left {
text-align: center;
}
/*Small modification in filer and right classes*/
.filter {
height: 100%;
width: 100%;
background-color: hsla(277, 88%, 32%, 0.603);
border-top-right-radius: 10px;
border-top-left-radius: 10px;
}
.right {
height: 50%;
width: 100%;
background-size: cover;
background-repeat: no-repeat;
}
}
<div class="wrap">
<div class="main" role="main" >
<div class="left">
<div class="text-container">
<h1 class="title">
Get <span>insights</span> that help your business grow.
</h1>
</div>
<p class="desc">
Discover the benefits of data analytics and make better decisions
regarding revenue, customer experience, and overall efficiency.
</p>
<div class="stats-container">
<div class="stats">
<h1>10k+</h1>
<p class="stats-desc">COMPANIES</p>
</div>
<div class="stats">
<h1>314</h1>
<p class="stats-desc">TEMPLATES</p>
</div>
<div class="stats">
<h1>12M+</h1>
<p class="stats-desc">QUERIES</p>
</div>
</div>
</div>
<div class="right">
<img class="filter" src= ./1.png>
</div>
</div>
</div>
I don't know the exact reason behind this, probably someone with higher depth knowledge would be able to comment.
If you still want to use the url from CSS you can still use it but instead changing the
flex-direction:column
do
diplay:block
Secondly, when you are using the media query, you need to redefine the classes used for image and its display(.filter and .right). Otherwise the changes will not be applied to them, this was kind of an obvious mistake which I observed.
Also you have re-defined media query twice and there is a mistake in CSS in using {} brackets.