In the scenario where the maximum width is 1220px, I want to change the main display to column. This is what I have implemented:
@media (max-width: 1220px) {
.main {
flex-direction: column;
}
However, when the width reaches 1220px, the image disappears. What am I doing incorrectly?
For an easier reference, here is the link to the Code Pen:
https://codepen.io/Rvssco/pen/LYzGYgV
Thank you in advance!
The disappearance of the image is due to including the src of the image in CSS instead of HTML. The flex-direction property cannot detect the presence of the image when changing direction, resulting in the image not appearing. You can refer to my code for a correct implementation.
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>The specific reason for this issue is unclear, but someone with deeper knowledge may be able to provide insight.
If you still prefer using the URL from CSS, consider replacing
flex-direction:column
with
diplay:block
Additionally, when utilizing the media query, ensure to redefine the classes used for the image and its display (.filter and .right) to apply changes effectively, as observed errors in implementation.
Furthermore, there are redundant redefinitions and incorrect use of {} brackets in the CSS.
I'm sorry for reaching out here instead of Google's forums, but I haven't had any luck finding answers there. Currently, I have a domain verified on Google Apps by uploading an HTML file, which is being used for email services. I don' ...
I created a Django application with a template that includes an image. However, I encountered an issue where the server is attempting to display the image using the redirect link from the HTML template instead of retrieving it from the media file. For ins ...
My goal is to create a functionality where, upon clicking the calculate button (without performing any calculations yet), the user will be redirected to a new screen displaying a response message that says "Thanks for posting that!". However, instead of th ...
Currently, I'm encountering errors while working on this project in Notepad. Can you help me figure out what's wrong with my code? I'm attempting to create an onload traffic light using an object array. The requirement is to implement this f ...
I need help creating a form with options that have two potential values. The user will first choose between "Low Price" (lp) or "High Price" (hp), and then select either Type 1 or Type 2, both of which have data attributes for "hp" and "lp". My goal is to ...
Recently, I have discovered the wonders of www.webflow.com for creating an admin layout. It excels in generating a flexbox layout based on my PSD design without requiring me to manually code with Gulp. My plan is to further simplify the process by breaki ...
I am looking to vertically align all the fields one below another. Currently, they are randomly aligned with Bootstrap CSS. The desired layout should look like this: Label1: Textbox1 Label2: Textbox2 Here is the code snippet: Which class should I use to ...
I am currently working with Angular Animations using version 4.1.3 Check out the code snippet below: @Component({ selector : 'my-fader', animations: [ trigger('visibilityChanged', [ state('true' , style({ opaci ...
Is there a way to rotate the print review using CSS and HTML? I am facing issues as the CSS styles do not seem to apply properly on it. Can someone help me solve this problem? ...
In my explanatory bubble, I aim to include text within the explain-header div as a container for my explanations: /*Explain Bubble*/ .explain-container { position: relative; overflow: hidden; max-width: 70vw; max-height: 50vh; background-c ...
I'm in the process of developing a bot that can save links sent in messages automatically. When a user sends the command -save test.com/123.png, my bot is designed to download the file named 123.png. Although I have experience downloading directly at ...
I'm attempting to retrieve a JSON result using jQuery. $.ajax({ type: "GET", url: "http://localhost:8080/App/QueryString.jsp?Query="+query, contentType:"text/html; charset=utf-8", dataType: "json", success: function(json) { if(data!="") ...
Currently, I have a basic counter set up in react-redux as part of my learning process with these frameworks. My goal is to create a pair of number input fields that determine the payload for an increment/decrement action sequence. The intended outcome is ...
Is there a way to create a design where an infinite vertical line extends from the bottom of a circle (or in my case, a rectangle) without using css :after or pseudo-elements? I would like the line to be its own element and not limited by the restriction ...
My setup includes two tabs: <div class="modal-body"> <form name="myForm" novalidate="novalidate"> <ul class="nav nav-tabs"> <li class="active"><a data-toggle="tab" href="#basicInfo">Info</a></li> ...
I utilized the dataTable plugin to format my HTML table, but unfortunately it is not displaying the results as expected. Instead of showing 10 records per page, it is displaying all records at once. I even tried setting "iDisplayLength: 10" but it didn&apo ...
I've been working on making my player div responsive in terms of height. Currently, when I resize the width, the div scales down accordingly. However, resizing the height does not have the same effect. The scrollbar doesn't seem to help either du ...
I have integrated buttons into my website that are activated by JS AJAX loads. By clicking on these buttons, a JavaScript function is executed to load the contents of a PHP file into a specific div element. This setup is crucial as I want to avoid the enti ...
$(document).ready(function() { $("#client-list").on("change", function() { var selectedValue = $(this).val(); location.reload(); }); }); Is there a way to refresh only the div with id='calendar' without refreshing the entire pa ...
I am trying to figure out a way to trigger this code onClick instead of automatically. Can anyone help me with this question? Below is the JavaScript code snippet: $("input[type=radio],button").each(function () { var outputName = $(this).attr("d ...