CODEWITHSUNDEEP
htmlcsswordpresszurb-foundationgrid-layout
Roelof Plas
Roelof Plas

Reputation: 51

Div's not responsive [foundation]

I've designed a layout in PS, using a 12 column grid, and want to make it work in Wordpress. I'm using Reverie theme to start with, wich is a framework theme thingy that works on Foundation.

I got my header working like it should, but the content below it wont adjust to the screen size. Ill post the code I have below:

page.php:

<?php get_header(); ?>
<div class="container">
<!-- Row for main content area -->
    <div class="large-12 medium-12 small-12 columns" id="content" role="main">      
        <div id="top-content" class="large-12 medium-12 small-12">
        </div> <!-- end top-content">

        <footer>
            <center><p class="copy">&copy; <?php echo date('Y'); ?> Roelof Plas. Ontwerp door <a href="http://roelofplas.nl" rel="nofollow" title=""><span class="roelof">roelofplas.nl.</span></a> Alle rechten voorbehouden.</p></center>

        </footer>
    </div>
</div>
<?php get_footer(); ?>

style.css:

#top-content {
    width: 1140px;
    height: 530px;
    background-color: #63bcb8;
    z-index: 1000;
    top: -48px;
    position: absolute;
}

What it's supposed to look like (just the turquase div):

I can't post images yet (need 2 more rep) so click this.

Live version: click me

Please tell me what I'm doing wrong. I read a ton of tutorials about Foundation and grids etc, but I can't get it right.

If you need more info from me or anything please tell me.

Regards,

Roelof Plas

SOLUTION BY Joel, thanks mate! Can't rep u yet but I will when I can! :D

Upvotes: 0

Views: 524

Answers (2)

Joel
Joel

Reputation: 483

Remove the "width: 1140px;" from your #top-content class, the .columns and .large-12, .medium-12 etc from foundation will take care of the responsiveness.

The reason your footer isn't showing up is two fold: One, you should replace position:absolute on #top-content with #position:relative. Using position:absolute takes the DIV out of the DOM flow and causes your footer to hide 'behind' it.

You also have an unclosed comment:

end top-content"> should be end top-content -->

With those changes your footer should then show up correctly and the main turquoise DIV will become responsive.

Upvotes: 3

wikijames
wikijames

Reputation: 192

> You haven't used "columns" class on this.
> You don't required any kind of width when you applying "-12" in every class.
> And if you still willing to provide height on this **ID** "#top-content". then use media query to give width on every other size. 

<div id="top-content" class="large-12 medium-12 small-12">

Upvotes: 1

Related Questions