CODEWITHSUNDEEP
htmlcsszurb-foundationzurb-foundation-6
The 0bserver
The 0bserver

Reputation: 986

How come the medium-offset-2 value does not apply

I'm using zurb's foundation to build my website, and I have two action buttons in a callout.

Now I would like to have some space in between the two buttons upto tablet sized screens, so I've used a medium-offset- as class.

<div class="callout large">
    <div class="row column text-center">
        <h3>Lorem ipsum dolor sit amet.</h3>
        <a href="#" class="button medium-2">Some Button</a>
        <a href="#" class="button medium-2 medium-offset-2 hollow">Another Button</a>
    </div>
</div>

But the end-result just has the normal gutter space between the two buttons, and I can't figure out why the css for .button has higher priority than the margin applied by medium-offset-

Here is a working example in jsfiddle which has the same issue. I also tried re-arranign positions of button and medium-offset- positions in html to see if that affected, but no dice. https://jsfiddle.net/u356n5cs/

If I specifically target the buttons with say an id or .named_div > a , the result adds a space, but then the entire thing is not exactly centered.

Upvotes: 0

Views: 155

Answers (2)

Chris O
Chris O

Reputation: 689

Your class <div class="row column text-center"> is for a row with column width of 12 on the grid... so the grid width was already maxed. I altered your example by splitting the title row from the anchors and specifying the anchors as columns within a row having undefined column width and tried in your fiddle. Spreads them apart to the boundaries in medium screen width:

    <div class="callout large">
        <div class="columns row text-center">
            <h3>Lorem ipsum dolor sit amet.</h3>
        </div>
        <div class="row text-center">
            <a href="#" class="button medium-2 columns">Some Button</a>
            <a href="#" class="button medium-2 medium-offset-2 hollow columns">Another Button</a>
        </div>
    </div>

Upvotes: 0

Rion Williams
Rion Williams

Reputation: 76557

It looks like the margin of your medium-offset-2 class is being explicitly overridden :

enter image description here

A quick glance shows that the .button class that is being applied to the same element appears to be the responsible party :

enter image description here

You could force the margin to be applied to the button by defining your own custom style like the following one to ensure it is applied properly :

@media screen and (min-width: 40em){
  .button.medium-offset-2 {
    margin-left: 16.66667%;
  }
}

You can see an example of this here.

Upvotes: 3

Related Questions