I am a beginner learning HTML and CSS. I'm currently working on a project and I am utilizing media query. I have design the desktop version first because that looks easier to me. So why designing the mobile version, I don't why the mobile version is not showing the background image (and the pat to background image is very correct). I have tried my best and that is why I have decided to come on the platform to ask. Here's my code, please I want to know my mistake.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- displays site properly based on user's device -->
<link rel="icon" type="image/png" sizes="32x32" href="./images/favicon-32x32.png">
<link rel="stylesheet" href="styles.css">
<!--fonts styles-->
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&family=Lexend+Deca&display=swap" rel="stylesheet">
<title>Frontend Mentor | Stats preview card component</title>
</head>
<body>
<main class="container">
<div class="first">
<!--container for background image-->
</div>
<div class="second">
<h1>Get <span>insights</span> that help your business grow.</h1>
<p>Discover the benefits of data analytics and make better decisions regarding revenue, customer
experience, and overall efficiency.</p>
<div class="stats">
<dl>
<div>
<dt>10k+</dt>
<dd>companies</dd>
</div>
<div>
<dt>314</dt>
<dd>templates</dd>
</div>
<div>
<dt>12M+</dt>
<dd>queries</dd>
</div>
</dl>
</div>
</div>
</main>
</body>
</html>
/* Base styles */
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
html {
font-size: 15px;
}
/*Card Styles*/
body {
background-color:hsl(233, 47%, 7%);
font-family: 'Inter', sans-serif;
font-weight: 400;
}
main {
width: 80%;
margin: 1.5em;
background-color: hsl(244, 38%, 16%);
display: grid;
grid-template-columns: 1fr 1fr;
margin: 8.5em auto;
border-radius: 6px;
}
.first {
background-image:url('images/image-header-desktop.jpg');
background-color: hsl(277, 64%, 61%);
background-blend-mode: multiply;
order: 1;
}
.second {
padding: 3em;
}
h1 {
color: hsl(0, 0%, 100%);
width: 350px;
}
h1 > span {
color: hsl(277, 64%, 61%);
}
p {
color: hsla(0, 0%, 100%, 0.75);
margin-top: 1em;
width: 400px;
font-family: 'Lexend Deca', sans-serif;
font-weight: 400;
line-height: 1.4;
}
dl {
margin-top: 3em;
display: flex;
justify-content: space-between;
}
dl dt {
color: hsl(0, 0%, 100%);
font-weight: 700;
font-size: 1.25rem;
}
dl dd {
font-variant-caps: all-petite-caps;
color: hsla(0, 0%, 100%, 0.6);
}
/*media query styles */
@media(max-width:480px) {
body {
min-height: 100vh;
padding: 0.5em;
}
main {
width: 100%;
grid-template-columns: 1fr;
}
.first {
background-image: url('images/image-header-mobile.jpg');
background-color: hsl(277, 64%, 61%);
background-blend-mode: multiply;
}
}
Please any help would be very appreciated.
I want to the background image to show in the mobile version of the code but it wasn't showing
You have to give the.firstamin-heightfor the image to show up. You can tweak around with the value for your needs.On desktop there's a certain space where the content (with height) can be visible. The
min-heightis for that "space" to be increased on mobile, because it was 0, and to be responsive, but you may define a simpleheightinstead.The orientation on mobile is usually portrait. The content is vertically positioned not horizontally. So, it makes better sens to apply a style that adapts to that.
Practically, we have to change the style from columns (horizontal) to rows (vertical).
That is, we add
grid-template-columns: auto;(or better yet:grid-template-columns: initial;) to reset the "horizontal" value and addgrid-template-rows: 1fr 1fr;to define the vertical position.The
autois the default state of thegrid-template-columns, which when we put under480pxmedia query, changes the inherited value, that wasgrid-template-columns: 1fr 1fr. Then we have to define themainelement's new state with thegrid-template-rows: 1fr 1fr;, as can be seen here below: