Menu icon Foundation

Designer | Anaheim, California, USA

My Posts

  • 1
    Reply
  • Orbit Image height

    By Carolyn Lee

    F6Orbitheight

    I'm using Foundation 6 and using the orbit slider. I've got images in my slider that are 1170 x 400px but the slider for some reason adds about 10px to the height of my images. How can I get the slider to stop adding the extra 10px to the height? It'... (continued)

    Last Reply by Carolyn Lee 15 days ago


  • 1
    Reply
  • Magellan side menu sticky

    By Carolyn Lee

    F6Magellanstickymenu

    I want to use a magellan side menu that is sticky but only make it sticky once it scrolls to the top edge of side menu. Is there a way to have it sit below a top banner, and then once the screen is scrolled to the top of the side menu, it then sticks... (continued)

    Last Reply by Carolyn Lee about 2 months ago






  • 2
    Replies
  • F5 Set min-width for entire site?

    By Carolyn Lee

    min-width

    Just wondering how you would set a minimum width for the whole site? I'm having to work with cflayout tabs and accordions that can only be a min-width of 550px or so. So trying to make it as responsive and mobile friendly as possible but thinking at least... (continued)

    Last Reply by Carolyn Lee over 2 years ago





My Comments

Carolyn Lee commented on Carolyn Lee's post 15 days

I figured out why it was adding it now. I had the padding collapsed on that grid-container. Removed that and now it is the right height.

Carolyn Lee commented on Carolyn Lee's post about 2 months

Ok, well after much searching I finally found something else that works, just in case anyone else wants to know. https://html-online.com/articles/javascript-stick-html-top-scroll/
So instead of using the Foundation sticky, I'm using this one with magellan. Yay, problem solved.

Carolyn Lee commented on Carolyn Lee's post 4 months

Anyone?

Carolyn Lee commented on Carolyn Lee's post 5 months

I've searched everywhere and studied the css files, but I just cannot figure out how to change only the top bar breakpoint. I know I could probably change the medium breakpoint, but then other things would also change. Is it possible to only change the top bar breakpoint so that it will go to small version at a little bit larger size.
Anyone know?

Carolyn Lee commented on Carolyn Lee's post 5 months

I found the answer to my first question. Using the drilldown menu. Started another post for my other question about breakpoint. https://foundation.zurb.com/forum/posts/60039-change-top-bar-breakpoint-foundation-651-css
 

Carolyn Lee commented on Baz Nezza's post 5 months

How would you change the medium breakpoint using css?

Carolyn Lee commented on Carolyn Lee's post over 1 year

Ah I figured out a solution. I changed this line:
$('a[href=#]:not([href=#])').click(function() {
to
$('a.jump[href
=#]:not([href=#])').click(function() {
and then added class="jump" to any anchor links I had. That way it doesn't interfere with the accordion .js.

Carolyn Lee commented on Carolyn Lee's post over 1 year

Ok thanks. I'm starting to work on learning Sass, but not there yet.

Carolyn Lee commented on Carolyn Lee's post over 2 years

I'm only doing the design aspect of the project. All the functionality has already been done in ColdFusion. They have done accordions and tabs with cflayoutarea and cflayout. But they are fixed-widths. I'm not sure if I can make them flexible or not. But if not I figured I could at least make it so that on a mobile it can be viewed in landscape mode hopefully. On a tablet it should fit just fine and of course also on a desktop view it should be fine. Maybe I don't need to worry about setting a min-width. I just didn't want everything else to "fit" on the small screen with the middle section being too wide. It's hard to explain. Guess I'll just have to figure out what to do. 

Carolyn Lee commented on Carolyn Lee's post about 3 years

Valerie, here is what I did. My text in my accordions was sometimes quite long and since on my pages I can potentially have quite a few of them, I opted to restrain the text on the .accordion .accordion-navigation > a to one line only:

.accordion .accordion-navigation > a { 
  font-family: 'Droid Serif', serif; 
  color: #5e4631; 
  font-weight: bold;
  background: #edeae5;
  border: 1px solid #b1a89b;
  padding-left: 3.75rem;
  padding-right: 2.25rem;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

And then I went back to using absolute positioning for my icon:

.accordion-navigation > a:after {
    content: "\f055";
  font-family: FontAwesome;
    position: absolute;
  right: 1.75rem;
  z-index: 1;
}
.accordion-navigation.active > a:after {
    content: "\f056";
  font-family: FontAwesome;
}

That works just perfectly but only because no matter what screen size, my accordions are only ever 1 line. But it works great for me because then if on a small screen, you don't have to scroll and scroll so much, you can see what you want to click on and then the full info is under each item.

So not sure if that would work for what you're doing, but I finally got it to where I'm really happy with it.
Hopefully it works right across devices and browsers. :)

Posts Followed

  • 2
    Replies
  • F5 Set min-width for entire site?

    By Carolyn Lee

    min-width

    Just wondering how you would set a minimum width for the whole site? I'm having to work with cflayout tabs and accordions that can only be a min-width of 550px or so. So trying to make it as responsive and mobile friendly as possible but thinking at least... (continued)

    Last Reply by Carolyn Lee over 2 years ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Carolyn Lee's post 15 days

I figured out why it was adding it now. I had the padding collapsed on that grid-container. Removed that and now it is the right height.

You commented on Carolyn Lee's post about 2 months

Ok, well after much searching I finally found something else that works, just in case anyone else wants to know. https://html-online.com/articles/javascript-stick-html-top-scroll/
So instead of using the Foundation sticky, I'm using this one with magellan. Yay, problem solved.

You commented on Carolyn Lee's post 4 months

Anyone?

You commented on Carolyn Lee's post 5 months

I've searched everywhere and studied the css files, but I just cannot figure out how to change only the top bar breakpoint. I know I could probably change the medium breakpoint, but then other things would also change. Is it possible to only change the top bar breakpoint so that it will go to small version at a little bit larger size.
Anyone know?

You commented on Carolyn Lee's post 5 months

I found the answer to my first question. Using the drilldown menu. Started another post for my other question about breakpoint. https://foundation.zurb.com/forum/posts/60039-change-top-bar-breakpoint-foundation-651-css
 

You commented on Baz Nezza's post 5 months

How would you change the medium breakpoint using css?

You commented on Carolyn Lee's post over 1 year

Ah I figured out a solution. I changed this line:
$('a[href=#]:not([href=#])').click(function() {
to
$('a.jump[href
=#]:not([href=#])').click(function() {
and then added class="jump" to any anchor links I had. That way it doesn't interfere with the accordion .js.

You commented on Carolyn Lee's post over 1 year

Ok thanks. I'm starting to work on learning Sass, but not there yet.

You commented on Carolyn Lee's post over 2 years

I'm only doing the design aspect of the project. All the functionality has already been done in ColdFusion. They have done accordions and tabs with cflayoutarea and cflayout. But they are fixed-widths. I'm not sure if I can make them flexible or not. But if not I figured I could at least make it so that on a mobile it can be viewed in landscape mode hopefully. On a tablet it should fit just fine and of course also on a desktop view it should be fine. Maybe I don't need to worry about setting a min-width. I just didn't want everything else to "fit" on the small screen with the middle section being too wide. It's hard to explain. Guess I'll just have to figure out what to do. 

You commented on Carolyn Lee's post about 3 years

Valerie, here is what I did. My text in my accordions was sometimes quite long and since on my pages I can potentially have quite a few of them, I opted to restrain the text on the .accordion .accordion-navigation > a to one line only:

.accordion .accordion-navigation > a { 
  font-family: 'Droid Serif', serif; 
  color: #5e4631; 
  font-weight: bold;
  background: #edeae5;
  border: 1px solid #b1a89b;
  padding-left: 3.75rem;
  padding-right: 2.25rem;
  white-space: nowrap; 
  overflow: hidden; 
  text-overflow: ellipsis;
}

And then I went back to using absolute positioning for my icon:

.accordion-navigation > a:after {
    content: "\f055";
  font-family: FontAwesome;
    position: absolute;
  right: 1.75rem;
  z-index: 1;
}
.accordion-navigation.active > a:after {
    content: "\f056";
  font-family: FontAwesome;
}

That works just perfectly but only because no matter what screen size, my accordions are only ever 1 line. But it works great for me because then if on a small screen, you don't have to scroll and scroll so much, you can see what you want to click on and then the full info is under each item.

So not sure if that would work for what you're doing, but I finally got it to where I'm really happy with it.
Hopefully it works right across devices and browsers. :)

Posts Followed



Following

  • No Content

Followers

  • No Content