Menu icon Foundation

Coder | Columbia, SC

Frustrated Composer - even more frustrated PHP, Coldfusion, CSS, JQuery Code Geek.

My Posts



  • 2
    Replies
  • Jumping Footer

    By Les Mizzell

    sticky footer

    I'm using a sticky footer on a site that works well for the most part ... but when a page is loading, if the content isn't tall enough to push the footer to the bottom, it will typically first appear up under the content and not "stuck" to the viewport bo... (continued)

    Last Reply by Marc McGee over 4 years ago




  • 2
    Replies
  • Nested List

    By Les Mizzell

    lists

    Found I'm unable to mix list styles with nested lists. The parent overrides the inner nested UL. For the code below, all list items have no bullet. Is there a way to override that?

    Last Reply by Les Mizzell almost 5 years ago


My Comments

Les Mizzell commented on Les Mizzell's post over 3 years

Oh, if you look at the text page, no images are showing ... which SHOULD be under the "The Two Claras" text part...

Les Mizzell commented on Les Mizzell's post almost 5 years

Thinking is was a Reveal/Maps issue, I switched to ColorBox for my modal window.
Had the same problem.

After a lot of research, I believe the solution will work for Reveal as well.
If you call the "resize" function after the modal opens, the map will fully load.

    $(document).ready(function(){
      $(".ajax").colorbox({
       width:'620px',
       height:'620px',
       scrolling:false});
      });

    $('.ajax').on('shown', function () {
           google.maps.event.trigger(map, 'resize');
            })

Les Mizzell commented on Les Mizzell's post almost 5 years

I really like the way they have it working on one of the example sites:
http://speakr.com/

Here, the logo is contained in the top-nav, but there's a breakpoint set at just the right spot to pop it up over the nav prevent the wrapping issue I have.

Still working out exactly how they did that ... but it's EXACTLY what I want! Suggestions?

I note the switch to mobile happens at the exact same spot as my site.

Les Mizzell commented on Jamie Brightmore's post almost 5 years

I'm having a little trouble with this to ...

This page: http://columbiacityjazz.com/faculty

On mobile, I'd like the picture to ALWAYS be first. However, when I use push/pull, the picture is first, but it's offset so half of it is off screen.

<div class="row">
  <div class="large-7 columns small-push-5 ">

<h3 data-magellan-destination="shannon"><a name="shannon"></a>Headline</h3>   
    <p>Stuff Here.</p>
  </div>
  <div class="large-5 columns small-pull-7">
    <img src="/img_staff/Shannon-Manning.jpg" class="facPIC" />
  </div>
</div>

Les Mizzell commented on Philip Meissner's post almost 5 years

I just upgraded to 5.3.3 - and I''m still seeing this issue.

I'm using Magellan as a sub-menu under the top-bar, rather than a drop down in the top-bar, on a few select pages.

When I start to scroll the page, the top-bar and Magellan "sticks" like you'd expect for just a bit, then suddenly the top-bar vanishes, and it's replaced with a SECOND copy of Magellan.

Resizing the page even the slightest fixes it. But as mentioned before, nobody visiting a site is going to resize the browser just to see what happens...

There seems to be some small browser differences.
In Firefox - the scroll seems smooth until the main top-bar vanishes and Magellan is duplicated
In Chrome - it's really jumpy and the second you start to scroll the top-bar vanishes and Magellan is duplicated.
IE is somewhere between those two.
Haven't tried Safari yet..

Les Mizzell commented on Les Mizzell's post almost 5 years

Perhaps just style your own lists?

Turns out, that's the only way to do it.

So, I don't touch the foundation.css file. I put all mods in overrides.css - and try to remember to reference a line number from the foundation.css file in my comments so I can always go back and figure out what I was modifying to start with! I'm not always that disciplined though.

<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/overrides.css" />

Posts Followed

  • 2
    Replies
  • Nested List

    By Les Mizzell

    lists

    Found I'm unable to mix list styles with nested lists. The parent overrides the inner nested UL. For the code below, all list items have no bullet. Is there a way to override that?

    Last Reply by Les Mizzell almost 5 years ago


Following

    No Content

Followers

My Posts



My Comments

You commented on Les Mizzell's post over 3 years

Oh, if you look at the text page, no images are showing ... which SHOULD be under the "The Two Claras" text part...

You commented on Les Mizzell's post almost 5 years

Thinking is was a Reveal/Maps issue, I switched to ColorBox for my modal window.
Had the same problem.

After a lot of research, I believe the solution will work for Reveal as well.
If you call the "resize" function after the modal opens, the map will fully load.

    $(document).ready(function(){
      $(".ajax").colorbox({
       width:'620px',
       height:'620px',
       scrolling:false});
      });

    $('.ajax').on('shown', function () {
           google.maps.event.trigger(map, 'resize');
            })

You commented on Les Mizzell's post almost 5 years

I really like the way they have it working on one of the example sites:
http://speakr.com/

Here, the logo is contained in the top-nav, but there's a breakpoint set at just the right spot to pop it up over the nav prevent the wrapping issue I have.

Still working out exactly how they did that ... but it's EXACTLY what I want! Suggestions?

I note the switch to mobile happens at the exact same spot as my site.

You commented on Jamie Brightmore's post almost 5 years

I'm having a little trouble with this to ...

This page: http://columbiacityjazz.com/faculty

On mobile, I'd like the picture to ALWAYS be first. However, when I use push/pull, the picture is first, but it's offset so half of it is off screen.

<div class="row">
  <div class="large-7 columns small-push-5 ">

<h3 data-magellan-destination="shannon"><a name="shannon"></a>Headline</h3>   
    <p>Stuff Here.</p>
  </div>
  <div class="large-5 columns small-pull-7">
    <img src="/img_staff/Shannon-Manning.jpg" class="facPIC" />
  </div>
</div>

You commented on Philip Meissner's post almost 5 years

I just upgraded to 5.3.3 - and I''m still seeing this issue.

I'm using Magellan as a sub-menu under the top-bar, rather than a drop down in the top-bar, on a few select pages.

When I start to scroll the page, the top-bar and Magellan "sticks" like you'd expect for just a bit, then suddenly the top-bar vanishes, and it's replaced with a SECOND copy of Magellan.

Resizing the page even the slightest fixes it. But as mentioned before, nobody visiting a site is going to resize the browser just to see what happens...

There seems to be some small browser differences.
In Firefox - the scroll seems smooth until the main top-bar vanishes and Magellan is duplicated
In Chrome - it's really jumpy and the second you start to scroll the top-bar vanishes and Magellan is duplicated.
IE is somewhere between those two.
Haven't tried Safari yet..

You commented on Les Mizzell's post almost 5 years

Perhaps just style your own lists?

Turns out, that's the only way to do it.

So, I don't touch the foundation.css file. I put all mods in overrides.css - and try to remember to reference a line number from the foundation.css file in my comments so I can always go back and figure out what I was modifying to start with! I'm not always that disciplined though.

<link rel="stylesheet" href="css/foundation.css" />
<link rel="stylesheet" href="css/overrides.css" />

Posts Followed


Following

  • No Content

Followers

  • No Content