large grid css no picture displaying - css

Question

I have a webpage where the css for the small and medium size work and display fine. my problem is with the large, everything is formatted correctly except that the page picture won't display. How do I fix this? Attached is the page layout and the full css. The error should be under the #media(min-width: 1024px)
header {
background-color: #002171;
color: #FFFFFF;
background-position: right;
background-repeat: no-repeat;
}
header a:link {
color: #FFFFFF;
text-decoration-line: none;
}
header a:visited {
color: #FFFFFF;
text-decoration-line: none;
}
header a:hover {
color: #90C7E3;
}
h1 {
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-family: Georgia, serif;
letter-spacing: 0.25em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
* {
box-sizing: border-box;
}
nav {
font-weight: bold;
font-size: 120%;
padding: 0;
text-align: center;
}
nav li {
border-bottom: none;
}
nav a {
text-decoration: none;
}
section {
padding-left: 2em;
padding-right: 2em;
}
h2 {
color: #1976D2;
font-family: Georgia, serif;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 {
color: #000033;
font-family: Georgia, serif;
}
#media(min-width: 600px) {
nav ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
justify-content: space-around;
}
.content main {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
}
h2 {
grid-row: 1 / 2;
grid-column: 1 / 5;
}
section {
grid-row: 2 / 3;
grid-column: auto;
}
#special {
grid-row: auto;
grid-column: 1 / 5;
}
footer {
grid-row: auto;
grid-column: 1 / 5;
}
}
#media(min-width: 1024px) {
nav ul {
flex-direction: column;
padding-top: 1em;
}
nav {
text-align: left;
padding-left: 1em;
padding-right: 1em;
grid-row: 2/3;
grid-column: 1/2;
}
main {
grid-row: 2/3;
grid-column: 2/3;
}
footer {
grid-row: 3/4;
grid-column: 2/4;
}
header {
grid-row: 1/2;
grid-column: 1/4;
}
#wrapper {
margin: auto;
width: 80%;
border: #00008B;
box-shadow: 1px 1px 1px;
display: grid;
grid-row: 3/3;
grid-column: 2/2;
}
}
}
main ul {
list-style-image: url('marker.gif');
font-family: Georgia, serif;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
nav a:link {
color: #5C7FA3;
}
nav a:visited {
color: #344873;
}
nav a:hover {
color: #A52A2A;
}
body {
font-family: Helvetica;
background-color: #EAEAEA;
color: #666666;
}
main {
background-color: #FFFFFF;
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
overflow: auto;
display: block;
}
dt {
color: #002171;
}
#wrapper {
background-color: #90C7E3;
background-image: linear-gradient(#FFFFFF, #90C7E3);
}
#homehero {
background-image: url('coast2.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero {
background-image: url('yurt.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero {
background-image: url('trail.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.resort {
font-weight: bold;
color: #1976D2;
}
footer {
background-color: #FFFFFF;
font-family: Georgia, serif;
font-size: 75%;
font-style: italic;
text-align: center;
padding: 2em;
}
#contact {
font-size: 90%;
}
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero">
</div>
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the California North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a sumptuously appointed private yurt and a cooked-to-order
breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
<div id="contact">
<span class="resort">Pacific Trails Resort</span><br> 12010 Pacific Trails Road <br> Zephyr, CA 95555<br>
<br> 888-555-5555
<br>
</div>
</main>
<footer>
Copyright © 2020 Pacific Trails Resort<br>
freed.nm#rhodesstate.edu
</footer>
</div>

Answer 1

From what I understand your image does not appear when the screen size is greater than 1024px. I made some changes to the code and got it to work as you wish, I think ...
I hope that's what you want
<!DOCTYPE html>
<html lang="en">
<head>
<title>Pacific Trails Resort</title>
<!-- <link rel="stylesheet" href="pacific.css"> -->
<meta charset="utf-8">
<style>
header {
background-color: #002171;
color: #FFFFFF;
background-position: right;
background-repeat: no-repeat;
}
header a:link {
color: #FFFFFF;
text-decoration-line: none;
}
header a:visited {
color: #FFFFFF;
text-decoration-line: none;
}
header a:hover {
color: #90C7E3;
}
h1 {
margin-top: 0;
margin-bottom: 0;
text-align: center;
font-family: Georgia, serif;
letter-spacing: 0.25em;
padding-top: 0.5em;
padding-bottom: 0.5em;
}
* {
box-sizing: border-box;
}
nav {
font-weight: bold;
font-size: 120%;
padding: 0;
text-align: center;
}
nav li {
border-bottom: none;
}
nav a {
text-decoration: none;
}
section {
padding-left: 2em;
padding-right: 2em;
}
h2 {
color: #1976D2;
font-family: Georgia, serif;
text-shadow: 1px 1px 1px #CCCCCC;
}
h3 {
color: #000033;
font-family: Georgia, serif;
}
#media(min-width: 600px) {
nav ul {
display: flex;
flex-wrap: nowrap;
justify-content: space-between;
justify-content: space-around;
}
.content main {
display: grid;
grid-template-rows: auto;
grid-template-columns: 1fr 1fr 1fr;
}
h2 {
grid-row: 1 / 2;
grid-column: 1 / 5;
}
section {
grid-row: 2 / 3;
grid-column: auto;
}
#special {
grid-row: auto;
grid-column: 1 / 5;
}
footer {
grid-row: auto;
grid-column: 1 / 5;
}
}
#media(min-width: 1024px) {
nav ul {
flex-direction: column;
padding-top: 1em;
}
nav {
text-align: left;
padding-left: 1em;
padding-right: 1em;
grid-row: 2/3;
grid-column: 1/2;
}
main {
grid-row: 2/3;
grid-column: 2/3;
}
footer {
grid-row: 3/4;
grid-column: 2/4;
}
header {
grid-row: 1/2;
grid-column: 1/4;
}
#wrapper {
margin: auto;
width: 80%;
border: #00008B;
box-shadow: 1px 1px 1px;
display: grid;
grid-row: 3/3;
grid-column: 2/2;
}
}
}
main ul {
list-style-image: url('marker.gif');
font-family: Georgia, serif;
}
nav ul {
list-style: none;
margin: 0;
padding-left: 0;
font-size: 1.2em;
}
nav a:link {
color: #5C7FA3;
}
nav a:visited {
color: #344873;
}
nav a:hover {
color: #A52A2A;
}
body {
font-family: Helvetica;
background-color: #EAEAEA;
color: #666666;
}
main {
background-color: #90C7E3;
padding-top: 1px;
padding-right: 20px;
padding-bottom: 20px;
padding-left: 30px;
overflow: auto;
display: block;
}
dt {
color: #002171;
}
#wrapper {
background-color: #90C7E3;
background-image: linear-gradient(#FFFFFF, #90C7E3);
}
#homehero {
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#yurthero {
background-image: url('yurt.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
#trailhero {
background-image: url('trail.jpg');
height: 300px;
background-size: 100% 100%;
background-repeat: no-repeat;
}
.resort {
font-weight: bold;
color: #1976D2;
}
footer {
background-color: #EAEAEA;
font-family: Georgia, serif;
width: 100%;
font-size: 75%;
font-style: italic;
text-align: center;
padding: 22px;
}
#contact {
font-size: 90%;
}
.details {
padding: 20px;
}
</style>
</head>
<body>
<div id="wrapper">
<header>
<h1>Pacific Trails Resort</h1>
</header>
<nav>
<ul>
<li>Home</li>
<li>Yurts</li>
<li>Activities</li>
<li>Reservations</li>
</ul>
</nav>
<div id="homehero">
<img src="coast2.jpg" alt="Coast2 Image">
</div>
<hr>
<div class="wrap">
<main>
<h2>Enjoy Nature in Luxury</h2>
<p><span class="resort">Pacific Trails Resort</span> offers a special lodging experience on the
California
North Coast with panoramic views of the Pacific Ocean. Your stay at Pacific Trails Resort includes a
sumptuously appointed private yurt and a cooked-to-order breakfast each morning.</p>
<ul>
<li>Unwind in the heated outdoor pool and whirlpool</li>
<li>Explore the coast on your own or join our guided tours</li>
<li>Relax in our lodge while enjoying complimentary appetizers and beverages</li>
<li>Savor nightly fine dining with an ocean view</li>
</ul>
<div id="contact">
<span class="resort">Pacific Trails Resort</span><br>
12010 Pacific Trails Road <br>
Zephyr, CA 95555<br>
<br>
888-555-5555<br>
</div>
</main>
</div>
<!-- <footer>
Copyright © 2020 Pacific Trails Resort<br>
freed.nm#rhodesstate.edu
</footer> -->
<div class="details">
<h2>Details</h2>
<ul>
<li>Dedicated</li>
<li>Fast</li>
<li>Secure</li>
</ul>
<br><br>
<h2>Social Networks</h2>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
<br><br>
<h2>Details</h2>
<ul>
<li>Dedicated</li>
<li>Fast</li>
<li>Secure</li>
</ul>
<br><br>
<h2>Social Networks</h2>
<ul>
<li>Facebook</li>
<li>Instagram</li>
<li>Twitter</li>
</ul>
<br><br>
</div>
</div>
<br><br>
<footer>
Copyright © 2020 Pacific Trails Resort<br>
freed.nm#rhodesstate.edu
</footer>
</body>
</html>
Please leave any comments if any problems arise, I would like to help