Menu icon Foundation

My Posts





My Comments

Amanda Healey commented on Amanda Healey's post about 4 years

I had tried on the buttons with no luck. A little more investigation and I realized putting display:block on the list items themselves help keep the buttons at 25%, but now they're stacked vertically. Float or inline block make a mess of the button size again, so how do I align them horizontally? I added a screen shot above of what's happening.

Amanda Healey commented on Amanda Healey's post about 4 years

you're second example worked perfectly for me. Thanks so much!

Amanda Healey commented on Akarob's post about 4 years

Can you show us your code?

Have you tried a margin: 0 auto; ?

Amanda Healey commented on Stefano Ravagni's post about 4 years

Check out the collapse/uncollapse section of the documentation about halfway down this page: http://foundation.zurb.com/docs/components/grid.html

Amanda Healey commented on Stefano Ravagni's post about 4 years

If you define the height and width of your images it should stop them from being cropped.
You could also resize your images to fit the space instead of trying to position them with code.

Amanda Healey commented on Amanda Healey's post over 4 years

I just started over and was able to figure it out on my own. I'm not sure exactly where I went wrong. but it's fixed now :)

.step{
  border: 1px solid #777;
  height: 150px;
  margin-bottom: 25px;
  padding: 25px;
}
<div class="row">
  <div class="medium-10 medium-centered columns">
    <div class="row"> 
        <div class="medium-4 columns">
            <div class="step">
              <h3>Step 1</h3>
          <p>Create an account</p> 
            </div>
        </div>
        <div class="medium-4 columns">
            <div class="step">
              <h3>Step 2</h3>
          <p>Do some stuff</p>
            </div>
        </div>
        <div class="medium-4 columns">
            <div class="step">
              <h3>Step 3</h3>
          <p>Finish your stuff and forget about it</p>
            </div>
        </div>
    </div>
  </div>
</div>

Posts Followed




Following

    No Content

Followers

My Posts

My Comments

You commented on Amanda Healey's post about 4 years

I had tried on the buttons with no luck. A little more investigation and I realized putting display:block on the list items themselves help keep the buttons at 25%, but now they're stacked vertically. Float or inline block make a mess of the button size again, so how do I align them horizontally? I added a screen shot above of what's happening.

You commented on Amanda Healey's post about 4 years

you're second example worked perfectly for me. Thanks so much!

You commented on Akarob's post about 4 years

Can you show us your code?

Have you tried a margin: 0 auto; ?

You commented on Stefano Ravagni's post about 4 years

Check out the collapse/uncollapse section of the documentation about halfway down this page: http://foundation.zurb.com/docs/components/grid.html

You commented on Stefano Ravagni's post about 4 years

If you define the height and width of your images it should stop them from being cropped.
You could also resize your images to fit the space instead of trying to position them with code.

You commented on Amanda Healey's post over 4 years

I just started over and was able to figure it out on my own. I'm not sure exactly where I went wrong. but it's fixed now :)

.step{
  border: 1px solid #777;
  height: 150px;
  margin-bottom: 25px;
  padding: 25px;
}
<div class="row">
  <div class="medium-10 medium-centered columns">
    <div class="row"> 
        <div class="medium-4 columns">
            <div class="step">
              <h3>Step 1</h3>
          <p>Create an account</p> 
            </div>
        </div>
        <div class="medium-4 columns">
            <div class="step">
              <h3>Step 2</h3>
          <p>Do some stuff</p>
            </div>
        </div>
        <div class="medium-4 columns">
            <div class="step">
              <h3>Step 3</h3>
          <p>Finish your stuff and forget about it</p>
            </div>
        </div>
    </div>
  </div>
</div>

Posts Followed

Following

  • No Content

Followers

  • No Content