Hi, In this video, I did exactly to add the class "show-for-small" but in my desktop browser, the map was still visible.

Question

Could you please show me where's error. Below is my code snipet

 <p>
      <img class="show-for-medium" src="assets/img/your-trail.jpg">
      <iframe class="show-for-small" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13213.303392438971!2d-118.35123519999999!3d34.11240684999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2bee34e0c488f%3A0x8ee8f604f42b3f03!2sRunyon+Canyon+Park!5e0!3m2!1sen!2sus!4v1437067495757" width="100%" height="250" frameborder="0" style="border:0"></iframe>
</p>

Answer 1 · 2016-08-21T21:38:57Z

August 21, 2016 9:38pm

EDIT*

Ok I checked out the project files for this section of the tutorial and see that Guil is actually using "show-for-small-only" and not just "show-for-smalls" in the class for <iframe>. Once you change that it works as intended. Note sure why it wasn't included in the video or why it worked for him when he originally used "show-for-smalls" in the video.

==========================================================================================

I'm having the same problem (your code looks the same as mine), here's my code:

---
name: trail
url: /trail
---


<div class="grid-block">
    <div class="grid-content">
        <h1>Hiking Trail</h1>
        <hr>
        <p><img class="show-for-medium" src="..//assets/img/your-trail.jpg">
        <iframe class="show-for-small" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d13213.303392438971!2d-118.35123519999999!3d34.11240684999999!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x80c2bee34e0c488f%3A0x8ee8f604f42b3f03!2sRunyon+Canyon+Park!5e0!3m2!1sen!2sus!4v1437067495757" width="100%" height="250" frameborder="0" style="border:0"></iframe>
        </p>
        <p>Runyon Canyon Park is one of the most popular hiking destinations in Los Angeles and one of best hikes in LA. This 130-acre dog park is located in Hollywood on the east end of the Santa Monica Mountains, providing hikers with a few overlapping loops and great views over Hollywood.</p>

        <ul class="no-bullet">
            <li><strong>Location:</strong> Los Angeles, CA</li>
            <li><strong>Length:</strong> 3.25 miles</li>
            <li><strong>Activites:</strong> Hiking, Running, Walking</li>
        </ul>

        <h3>Trail Reviews</h3>
        <hr>
        <div class="card">
                <div class="card-divider">
                Review by <strong>Melvin P.</strong>
                </div>
                <div class="card-section">
                <p>This is the best hiking trail in town!</p>
                </div>
            </div>
        </div>
</div>

Answer 2 · 2016-09-20T18:21:45Z

September 20, 2016 6:21pm

hi Phuc,

did the problem work itself out?

I haven't taken this course yet, but I remember on another topic, the updated version of browser was causing a difference in the Code to the Output, and a "work around" was posted in the community.

People were feeling that they were coding wrong, and we couldn't find any errors!! Plus we all got to learn a new technique to get to the answer! :)

best of luck!

Welcome to the Treehouse Community

Looking to learn something new?

Phuc Nguyen

Phuc Nguyen

Hi, In this video, I did exactly to add the class "show-for-small" but in my desktop browser, the map was still visible.

2 Answers

Melvin Peepers

Melvin Peepers

Kevin Lawler

Kevin Lawler