Menu icon Foundation
Unclickable Button

Hello people,

I have the following code set-up. Unless I am completely bonkers, there's nothing terribly wrong with the code.
Yet, the button is not clickable. And yes I've set up Foundation correctly since the button becomes clickable if I move it out of the grid.

Am I missing something obvious?

Thank you!

EDIT:
I removed .large-centered from the div containing the image and it fixed that. No idea why.

<div class="row">
    <div class="large-centered large-12 columns">
        &nbsp;
    </div>
    <div class="large-centered large-12 columns">
        <div class="large-6 columns">
            <h1>Project Name</h1>
        </div>
        <div class="large-6 columns">
            <div class="right">
                <a href="/Profile/Authorize" class="button">Connect with Facebook</a>
            </div>
        </div>
        <div class="large-centered large-12 columns">
            <img src="@Url.Content("~/Content/hero-image.jpg")" alt="hero image" />
        </div>
    </div>
</div>
            

         

buttons

Hello people,

I have the following code set-up. Unless I am completely bonkers, there's nothing terribly wrong with the code.
Yet, the button is not clickable. And yes I've set up Foundation correctly since the button becomes clickable if I move it out of the grid.

Am I missing something obvious?

Thank you!

EDIT:
I removed .large-centered from the div containing the image and it fixed that. No idea why.

<div class="row">
    <div class="large-centered large-12 columns">
        &nbsp;
    </div>
    <div class="large-centered large-12 columns">
        <div class="large-6 columns">
            <h1>Project Name</h1>
        </div>
        <div class="large-6 columns">
            <div class="right">
                <a href="/Profile/Authorize" class="button">Connect with Facebook</a>
            </div>
        </div>
        <div class="large-centered large-12 columns">
            <img src="@Url.Content("~/Content/hero-image.jpg")" alt="hero image" />
        </div>
    </div>
</div>
            

         
Karl Ward almost 6 years ago

I am no entirely sure why your button is not working, especially without a link. However, your columns layout is corrupt, because you need to use the "row" class for all rows, including nested columns. For example, each "large-12" class needs to be within a row because in no case will it not cover a row.

Also, your columns logic is a bit peculiar ... you have a 2x large-6 elements inside a large-12 column, which makes the wrapper element redundant ... then followed by another large-12 column, which should be in its own row ... Furthermore, the "large-centered" class has no effect if you are using columns that fill the entire width ... Although I am not sure what the first empty row is, basically I can see you have 3 separate rows there, and your code should look like this:

<div class="row">
    <div class="large-centered large-12 columns">
        &nbsp;
    </div>
</div>
<div class="row"
    <div class="large-6 columns">
        <h1>Project Name</h1>
    </div>
    <div class="large-6 columns">
        <div class="right">
            <a href="/Profile/Authorize" class="button">Connect with Facebook</a>
        </div>
    </div>
</div>
<div class="row">
    <div class="large-centered large-12 columns">
        <img src="@Url.Content("~/Content/hero-image.jpg")" alt="hero image" />
    </div>
</div>

Not only do your columns within rows not add up, but you are nesting incorrectly. Check the grid docs under "advanced" http://foundation.zurb.com/docs/components/grid.html. I believe this will fix your button, because it is likely a victim of the incorrect columns layout.