Menu icon Foundation

Designer | Utrecht, the Netherlands

My Posts


  • 2
    Replies
  • Forum posts not showing up

    By Malou Geurts

    forum

    Hello, I've noticed that lately some posts have disappeared from the forums and also that when I reply to my own thread it doesn't show up on recent activity, which sucks because I really need some expert advice! ;) Anyway, I figured I'd set up a to... (continued)

    Last Reply by Malou Geurts about 5 years ago





My Comments

Malou Geurts commented on Evan Yap's post almost 4 years

Hey Evan,

Have you read the docs? Like when you specify columns you can do this for small, medium and large screens, as each has the appropriate classes. The one, two, three, etc. classes are from older versions of foundation. (You can use them if you integrate ie8 support from Foundation 3, we're currently on version 5.)

I'd like to help you, but it seems like you should do some reading, maybe copy the code directly from the foundation docs and play around with it to see what happens.

If you take a look at my code and yours, try to see the differences and figure out why some things work, or don't work.

The foundation getting started page has a lot more info and examples on the left side menu. You should get started with the grid and then come back here. :)

I know code can seem a little overwhelming in the beginning, but just keep trying and read a lot! Good luck!

Malou Geurts commented on Evan Yap's post almost 4 years

Well, first off, you're using two searchbars inside this form. Try removing one. Also, your classes make no sense. You're combining an older version of Foundation as well.

You only have to call a single search bar and can give it various looks for various screen sizes.

Like this

input:
small-9 medium-8

button:
small-3 medium-4

Because Foundation is mobile first larger classes will inherit from the smaller unless you specify various states. (Also, the standard build has 12 columns, so make sure your row adds up, the end class is only useful if you have fewer columns.)

So it would look something like this:

<!-- Search bar for all sizes -->
      <form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">
       <!-- this part in action is Wordpress talk for the root url -->
        <div class="row collapse">
          <div class="small-9 medium-8 columns">
            <input type="text" value="" name="s" id="s" placeholder="Search">
          </div>
          <div class="small-3 medium-4 columns">
            <button type="submit" id="searchsubmit" class="postfix">Search</button>
          </div>
        </form>

Malou Geurts commented on Evan Yap's post almost 4 years

Hey,

You've made the button a link with a class button, try making it a button with the class postfix. This is an example of the search form I'm using:

<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">
  <div class="row collapse">
    <div class="medium-12 large-9 nine columns">
      <input type="text" value="" name="s" id="s" placeholder="Search">
    </div>
    <div class="medium-12 large-3 three end columns">
      <button type="submit" id="searchsubmit" class="postfix">Search</button>
    </div>
  </div>
</form>

Malou Geurts commented on Phil Doughty's post over 4 years

I had a similar problem when activating reflow in the equaizer, I see you have added start joyride, try disabling it and refreshing the page.

Also my browser is telling me jquery is deprecated (which version are you using), foundation works fine with the jquery that comes with Wordpress, which is also recommended because otherwise it might conflict with plugins that do run on the built in version.

Malou Geurts commented on Malou Geurts's post over 4 years

I'm not using equalizer on the masonry items. My layout is like this.

<page data-equalizer>
  <left data-equalizer-watch>
    <!-- stuff goes here -->
  </left>
  <right data-equalizer-watch>
    <masonry container>
      <masonry item />
      <masonry item />
      <masonry item />
    </masonry container>
  </right>
<!-- loads of empty space where the equalizer should be watching -->
</page>

Does that make sense? I'm using masonry for blog items with varying heights, but the container around the masonry container should have the same height as the left sidebar. However instead of both the content and the sidebar being the height required, they get extra long after masonry has pulled the items closer together.

Malou Geurts commented on George Bratsos's post over 4 years

Hey George,

Foundation is mobile-first, and will inherit the columns unless you specify a different arrangement for a large size, which means the layout will change when you hit a break-point.

What you should do is something like this:

<div class="row">
 <div class="small-6 large-8 columns">
   <p>Hello, this div will show 6 columns on mobile and tablet sizes, on desktop it will show 8 columns</p>
 </div>
 <div class="small-6 large-4 columns">
   <p>This div will show 6 columns on mobile and tablet sizes, on desktop it will show 4 columns</p>
 </div>
</div>

Give it a try. :)

Malou Geurts commented on Rafi Benkual's post almost 5 years

It's a shame Orbit will no longer be supported, but I've had most of my issues with Orbit, so I understand that it's just too much to keep around. Thanks for making it though, and keeping it available. I hope the community will keep it alive and functioning in the future! :)

Malou Geurts commented on Rafi Benkual's post about 5 years

Wow! Great guide. I'm new at Git, I've been wanting to get into it eventually and this is a pretty good place to start. I'll see if I can get this set up. Thanks!

Malou Geurts commented on ITLized's post about 5 years

I was trying to download a custom build with magellan yesterday, but it gave me an incomplete stylesheet (the magellan part was missing completely). I'm not sure why this happened and luckily I had a full build as a back up on my computer, but maybe your stylesheet is incomplete as well?

Try downloading the whole thing, or seeing if it works when you use foundation.min.css, and let us know if this solves your problem.

Malou Geurts commented on Rafi Benkual's post about 5 years

I have no idea how to submit a pull request. But I do have one!

For Orbit, when you have your slides link to content/pages the slider will always send you to the last slide link.

This is fixed by adding a higher z-index to the .active slide, so it'll link to the top (visible) slide-link.

I've put this in my own stylesheet, but I'd like to see it in foundation's orbit stylesheet, so I won't have to compensate every time I build a slider for content. :)

Posts Followed

  • 7
    Replies
  • top-bar help needed

    By Evan Yap

    top-bar

    How do I expand the search bar, because when I expand it with the grid it no longer overlaps with the button. Also when I shrink the browser down to mobile screen, it gets very glitchy, anyone know why or how I can fix this? I want this to be mobile and d... (continued)

    Last Reply by Rafi Benkual almost 4 years ago


  • 9
    Replies
  • Topbar text input too big

    By Brett Hambridge

    topbarinput

    Hi, I've got a new project on the go and have created a top bar (trying to emulate sexy topbar in the documentation). The problem is that the form input is bigger than the submit button (see attached image). Can you take a look at my code and see... (continued)

    Last Reply by Zachary Lyons over 4 years ago




  • 74
    Replies
  • Foundation 5 and IE8

    By James Cocker

    ie8Foundation 5usage

    Firstly, I know, I know, IE8 is nearly dead and the recommended way to use Foundation on it is to stick with version 3. However, I have a new site build coming up which unfortunately requires IE8 support, and I'd really like to use the new Foundation 5 wi... (continued)

    Last Reply by manav singh 6 months ago


  • 5
    Replies
  • jQuery and IE8 - Almost?

    By Jeremy Englert

    IEie8

    We all know that one of the reasons Foundation 5 isn't IE8-friendly is because it runs jQuery 2 which does not support IE8. However, I have been testing Foundation 5 with jQuery 1.7.x and have had good results, as seen here: http://mcfaddengavender.net/d... (continued)

    Last Reply by Jeremy Englert almost 5 years ago




  • 3
    Replies
  • Styling the top bar

    By Christian Cruz

    Hello everyone, I am styling the top bar and I was wondering how to change the background color of the <a> element when navigating the dropdown menu? In this case, the <a> element ("The Ceremony") has the default black background. Couldn't find ... (continued)

    Last Reply by Sherry Bradford over 2 years ago



Following

Followers

My Posts

My Comments

You commented on Evan Yap's post almost 4 years

Hey Evan,

Have you read the docs? Like when you specify columns you can do this for small, medium and large screens, as each has the appropriate classes. The one, two, three, etc. classes are from older versions of foundation. (You can use them if you integrate ie8 support from Foundation 3, we're currently on version 5.)

I'd like to help you, but it seems like you should do some reading, maybe copy the code directly from the foundation docs and play around with it to see what happens.

If you take a look at my code and yours, try to see the differences and figure out why some things work, or don't work.

The foundation getting started page has a lot more info and examples on the left side menu. You should get started with the grid and then come back here. :)

I know code can seem a little overwhelming in the beginning, but just keep trying and read a lot! Good luck!

You commented on Evan Yap's post almost 4 years

Well, first off, you're using two searchbars inside this form. Try removing one. Also, your classes make no sense. You're combining an older version of Foundation as well.

You only have to call a single search bar and can give it various looks for various screen sizes.

Like this

input:
small-9 medium-8

button:
small-3 medium-4

Because Foundation is mobile first larger classes will inherit from the smaller unless you specify various states. (Also, the standard build has 12 columns, so make sure your row adds up, the end class is only useful if you have fewer columns.)

So it would look something like this:

<!-- Search bar for all sizes -->
      <form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">
       <!-- this part in action is Wordpress talk for the root url -->
        <div class="row collapse">
          <div class="small-9 medium-8 columns">
            <input type="text" value="" name="s" id="s" placeholder="Search">
          </div>
          <div class="small-3 medium-4 columns">
            <button type="submit" id="searchsubmit" class="postfix">Search</button>
          </div>
        </form>

You commented on Evan Yap's post almost 4 years

Hey,

You've made the button a link with a class button, try making it a button with the class postfix. This is an example of the search form I'm using:

<form role="search" method="get" id="searchform" action="<?php echo home_url('/'); ?>">
  <div class="row collapse">
    <div class="medium-12 large-9 nine columns">
      <input type="text" value="" name="s" id="s" placeholder="Search">
    </div>
    <div class="medium-12 large-3 three end columns">
      <button type="submit" id="searchsubmit" class="postfix">Search</button>
    </div>
  </div>
</form>

You commented on Phil Doughty's post over 4 years

I had a similar problem when activating reflow in the equaizer, I see you have added start joyride, try disabling it and refreshing the page.

Also my browser is telling me jquery is deprecated (which version are you using), foundation works fine with the jquery that comes with Wordpress, which is also recommended because otherwise it might conflict with plugins that do run on the built in version.

You commented on Malou Geurts's post over 4 years

I'm not using equalizer on the masonry items. My layout is like this.

<page data-equalizer>
  <left data-equalizer-watch>
    <!-- stuff goes here -->
  </left>
  <right data-equalizer-watch>
    <masonry container>
      <masonry item />
      <masonry item />
      <masonry item />
    </masonry container>
  </right>
<!-- loads of empty space where the equalizer should be watching -->
</page>

Does that make sense? I'm using masonry for blog items with varying heights, but the container around the masonry container should have the same height as the left sidebar. However instead of both the content and the sidebar being the height required, they get extra long after masonry has pulled the items closer together.

You commented on George Bratsos's post over 4 years

Hey George,

Foundation is mobile-first, and will inherit the columns unless you specify a different arrangement for a large size, which means the layout will change when you hit a break-point.

What you should do is something like this:

<div class="row">
 <div class="small-6 large-8 columns">
   <p>Hello, this div will show 6 columns on mobile and tablet sizes, on desktop it will show 8 columns</p>
 </div>
 <div class="small-6 large-4 columns">
   <p>This div will show 6 columns on mobile and tablet sizes, on desktop it will show 4 columns</p>
 </div>
</div>

Give it a try. :)

You commented on Rafi Benkual's post almost 5 years

It's a shame Orbit will no longer be supported, but I've had most of my issues with Orbit, so I understand that it's just too much to keep around. Thanks for making it though, and keeping it available. I hope the community will keep it alive and functioning in the future! :)

You commented on Rafi Benkual's post about 5 years

Wow! Great guide. I'm new at Git, I've been wanting to get into it eventually and this is a pretty good place to start. I'll see if I can get this set up. Thanks!

You commented on ITLized's post about 5 years

I was trying to download a custom build with magellan yesterday, but it gave me an incomplete stylesheet (the magellan part was missing completely). I'm not sure why this happened and luckily I had a full build as a back up on my computer, but maybe your stylesheet is incomplete as well?

Try downloading the whole thing, or seeing if it works when you use foundation.min.css, and let us know if this solves your problem.

You commented on Rafi Benkual's post about 5 years

I have no idea how to submit a pull request. But I do have one!

For Orbit, when you have your slides link to content/pages the slider will always send you to the last slide link.

This is fixed by adding a higher z-index to the .active slide, so it'll link to the top (visible) slide-link.

I've put this in my own stylesheet, but I'd like to see it in foundation's orbit stylesheet, so I won't have to compensate every time I build a slider for content. :)

Posts Followed

Following

Followers

  • No Content