Menu icon Foundation

My Posts


My Comments

Gregor Agnes commented on Gregor Agnes's post about 2 years

Hi again, I didn't find a solution for this although I tried a lot in the past weeks. Giving up and will stick with gulp for the near future.

Gregor Agnes commented on Erik Oberhausen's post over 2 years

Maybe try: min-height: 100vh;

Gregor Agnes commented on Gregor Agnes's post over 2 years

Hey guys, thank you for your feedback. 
In my case it is actually the sass-compilation that takes that long. I will try some more things and let you know if I get to somewhere :)

Gregor Agnes commented on E. Smythe's post almost 3 years

for mega (100% width bottom) I use:
 
.dropdown-pane { left: 0 !important; right: 0 !important; width: auto !important;}

Gregor Agnes commented on Ivan Poddubsky's post about 4 years

@Emlyn Addison

Hi Emlyn,

if it works in scss it works in css too (the browser does ony interpret the generated css.

Just toggle the scss to css in the css section and you can see the css-code you need.

Regards,

Gregor

Gregor Agnes commented on Ivan Poddubsky's post about 4 years

@Corey @Emlyn Addison

I understand, that the problem is to center the rest of a block-grid, if the the number doesn't fit.

You can do that with the above solution. Please have a look here:

http://codepen.io/GregorA/pen/xGodMZ

It's working with preprocessor or vanilla css. You can toggle the "view compiled" in css-section.

If this ist not the answer to the first question, than it was my mistake.

Gregor Agnes commented on Ivan Poddubsky's post about 4 years

I think there is no need to use js, since the above solution works perfectly in all browsers.

Gregor Agnes commented on Ivan Poddubsky's post over 4 years

Hi,

if you use the solution above, just add font-size: 0 to the ul, to get rid of the "natural" gap between the inline-block elements

<ul class="medium-block-grid-3 small-block-grid-2 text-center">
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
</ul>
[class*="block-grid-"] {
  &.text-center {
    font-size: 0;
    > li {
      float: none;
      display: inline-block;
    }
  }
}

Or use another solution from her:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Posts Followed

  • 3
    Replies
  • grid-x 100% height

    By Erik Oberhausen

    xy gridheight

    Hello. What is the best method to make either a grid-x wrapper or the surrounding grid-container stretch to 100% height? I initially setup an outer grid frame wrapper that enclosed my grid-x elements, but then ran into the overflow of the content within... (continued)

    Last Reply by Jonny Wood over 1 year ago




Following

    No Content

Followers

My Posts

My Comments

You commented on Gregor Agnes's post about 2 years

Hi again, I didn't find a solution for this although I tried a lot in the past weeks. Giving up and will stick with gulp for the near future.

You commented on Erik Oberhausen's post over 2 years

Maybe try: min-height: 100vh;

You commented on Gregor Agnes's post over 2 years

Hey guys, thank you for your feedback. 
In my case it is actually the sass-compilation that takes that long. I will try some more things and let you know if I get to somewhere :)

You commented on E. Smythe's post almost 3 years

for mega (100% width bottom) I use:
 
.dropdown-pane { left: 0 !important; right: 0 !important; width: auto !important;}

You commented on Ivan Poddubsky's post about 4 years

@Emlyn Addison

Hi Emlyn,

if it works in scss it works in css too (the browser does ony interpret the generated css.

Just toggle the scss to css in the css section and you can see the css-code you need.

Regards,

Gregor

You commented on Ivan Poddubsky's post about 4 years

@Corey @Emlyn Addison

I understand, that the problem is to center the rest of a block-grid, if the the number doesn't fit.

You can do that with the above solution. Please have a look here:

http://codepen.io/GregorA/pen/xGodMZ

It's working with preprocessor or vanilla css. You can toggle the "view compiled" in css-section.

If this ist not the answer to the first question, than it was my mistake.

You commented on Ivan Poddubsky's post about 4 years

I think there is no need to use js, since the above solution works perfectly in all browsers.

You commented on Ivan Poddubsky's post over 4 years

Hi,

if you use the solution above, just add font-size: 0 to the ul, to get rid of the "natural" gap between the inline-block elements

<ul class="medium-block-grid-3 small-block-grid-2 text-center">
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
  <li>Block</li>
</ul>
[class*="block-grid-"] {
  &.text-center {
    font-size: 0;
    > li {
      float: none;
      display: inline-block;
    }
  }
}

Or use another solution from her:

https://css-tricks.com/fighting-the-space-between-inline-block-elements/

Posts Followed



Following

  • No Content

Followers

  • No Content