Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

CSS

Seth Barthen
Seth Barthen
11,266 Points
Posted by Seth Barthen
Seth Barthen
11,266 Points

Foundations Contact Page ... need help :)

If you go here.. http://foundation.zurb.com/templates.html take a look at the html of the contact page. I'm trying to implement this page onto my site, but I'm using Compass with Foundations and I'm not sure if that is messing it up?

When I run the contact page it only shows the nav bar and the top portion up to "Get in Touch!

We'd love to hear from you. You can either reach out to us as a whole and one of our awesome team members will get back to you, or if you have a specific question reach out to one of our staff. We love getting email all day all day."

After that the rest is blank and when I go into the Google dev tools bar it's not even showing the rest of the HTML for the forms. What is going on with this thing?!

Is there something within the Foundations/Compass that I need to activate or didn't do right? In the apps.scss I uncommented: @import "foundation/components/visibility"; @import "foundation/components/block-grid"; @import "foundation/components/type"; @import "foundation/components/section";

Here is my code:

<?php 
$pageTitle = "Systems: Contact";
$section = "contact";
include("inc/header.php"); 
?>


    <div class="row">

        <div class="large-9 columns">

            <h3>Get in Touch!</h3>
            <p>We'd love to hear from you. You can either reach out to us as a whole and one of our awesome team members will get back to you, or if you have a specific question reach out to one of our staff. We love getting email all day <em>all day</em>.</p>

            <div class="section-container tabs" data-section>

                <div class="section">
                    <h5><a href="#panel1">Contact  Systems</a></h5>
                    <section class="content" data-slug="panel1">

                        <form>
                            <div class="row collapse">
                                <div class="large-2 columns">
                                <label class="inline">Your Name: </label>
                                </div>
                                <div class="large-10 columns">
                                <input type="text" id="yourName" placeholder="Jane Smith">
                                </div>
                            </div>
                            <div class="row collapse">
                                <div class="large-2 columns">
                                <label class="inline"> Your Email: </label>
                                </div>
                                <div class="large-10 columns">
                                <input type="text" id="yourEmail" placeholder="jane@smithco.com">
                                </div>
                            </div>
                            <label>Message: </label>
                            <textarea rows="4"></textarea>
                            <button type="submit" class="radius button">Submit</button>
                        </form>

                    </section>
                </div>

                <section class="section">
                    <h5 class="title"><a href="#panel2">Specific Person</a></h5>
                    <div class="content" data-slug="panel2">
                        <ul class="large-block-grid-5">
                        <li><a href="mailto:mal@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Brian </a></li>
                        <li><a href="mailto:zoe@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Katie </a></li>
                        <li><a href="mailto:jayne@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Seth</a></li>
                        <li><a href="mailto:doc@serenity.bc.reb"><img src="http://placehold.it/200x200&text=[person]">Elizabeth</a></li>
                        </ul>
                    </div>
                </section>

            </div>
        </div>


        <div class="large-3 columns">
            <h5>Map</h5>       
            <p>
                <a href="" data-reveal-id="mapModal"><img src="../img/madison.jpg"></a><br/>
                <a href="" data-reveal-id="mapModal">View Map</a>
            </p>
            <p>
                123 Awesome St.<br/>
                Barsoom, MA 95155
            </p>
        </div>

    </div>

    <div class="reveal-modal" id="mapModal">
        <h4>Where We Are</h4>
        <p><img src="http://placehold.it/800x600"/></p>
        <a href="#" class="close-reveal-modal">Ɨ</a>
    </div>



<?php
include("inc/footer.php"); 
?>

2 Answers

Anneke Crouse
Anneke Crouse
8,199 Points
Anneke Crouse
Anneke Crouse
8,199 Points

Hey Seth.

Not really sure if this will help you, but try uncommenting all the foundation components? It helped me a couple of times when I was building a site with Foundation and Sass.

Also, maybe nothing after that block of text is showing, because there's something wrong with the container div: <div class="section-container tabs" data-section> so try move things out of that div to see if that's the case.

Seth Barthen
Seth Barthen
11,266 Points
Seth Barthen
Seth Barthen
11,266 Points

Nice! Yea I just figured out I needed to uncomment the variables in the _settings.scss to make the adjustments work. Thanks!