Menu icon Foundation

Designer | Anaheim, California, USA

My Posts





  • 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 10 days

Anyone?

Carolyn Lee commented on Carolyn Lee's post 19 days

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 24 days

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 26 days

How would you change the medium breakpoint using css?

Carolyn Lee commented on Carolyn Lee's post about 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 about 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 almost 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. :)

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

Valerie, I thought I had fixed it but using the float doesn't totally work without problems. I eventually commented out that piece of code for my plus/minus sign. But I'm trying to make it work again. Let me know if you ever were able to get it to work. If I figure out something I'll post back also.

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

Ah ok. Was adding it to the wrong thing. Thanks!

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 10 days

Anyone?

You commented on Carolyn Lee's post 19 days

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 24 days

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 26 days

How would you change the medium breakpoint using css?

You commented on Carolyn Lee's post about 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 about 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 almost 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. :)

You commented on Carolyn Lee's post almost 3 years

Valerie, I thought I had fixed it but using the float doesn't totally work without problems. I eventually commented out that piece of code for my plus/minus sign. But I'm trying to make it work again. Let me know if you ever were able to get it to work. If I figure out something I'll post back also.

You commented on Carolyn Lee's post about 3 years

Ah ok. Was adding it to the wrong thing. Thanks!

Posts Followed



Following

  • No Content

Followers

  • No Content