Set font-size for element with .grid class

[opan]

Hi guys, I have been trying avalanche but have a little problem. So I want to set font-size properties to element that use .grid class. But when I try, the result is not like I expected.

I use avalanche demo for example. Let say below is my HTML:

<div class="grid">
  <div class="1/2 grid__cell">
    <div class="box">.1/2</div>
  </div>
  <div class="1/2 grid__cell">
    <div class="box">.1/2</div>
  </div>
  ...
</div>

And here is the result:

Then, I set font-size properties to element with .grid class:

<div class="grid" style="font-size: 2rem;">
  <div class="1/2 grid__cell">
    <div class="box">.1/2</div>
  </div>
  <div class="1/2 grid__cell">
    <div class="box">.1/2</div>
  </div>
  ...
</div>

And then the result become like this:

Am I use it wrong? Is there a way to achieve this? Thanks

[colourgarden]

Hi @opan. Avalanche is an inline-block based grid so font-size: 0 is set on .grid to remove the inherent whitespace between inline-block elements. font-size is then reset to 1rem on the .grid__cell.

Using your example, you should set font-size: 2rem on .box, not on .grid.

[opan]

Okay, I understand what you mean from this article https://css-tricks.com/fighting-the-space-between-inline-block-elements/. Actually, I still get the problem here. For example, if I have HTML like this:

      <div class="list-block-item">
        <div class="list-block-item__info grid">
          <div class="1/2 grid__cell text-grey text-grey">
            <%= t('entries.show.scores') %>: <%= @entry.universal_score.try(:score) %>
          </div>

          <div class="1/2 grid__cell text-right">
            <%= render partial: 'likes/likes_for_entry_bem', locals: { entry: @entry } %>
          </div>
        </div>

        <article class="list-block-item__content" data-js="read-more">
          <%= @entry.description_squeeze.html_safe %>
        </article>

        <div class="list-block-item__info split-row">
          <div class="split-col-2">
            <%= entry_tags(@entry) %>
          </div>

          <div class="split-col-2 text-right">
            <%= link_to "#comment-box" do %>
              <%= image_tag "tmp/comment-icon-gray.png", class: 'img-xs-size' %>
            <% end %>
            <%= t('entries.show.comment') %>
          </div>
        </div>
      </div>

If I can set the font-size to list-block-item__info that would great instead setting to element inside .grid > .grid__cell one by one. Is there still a possible way to achieve this?

[colourgarden]

I'd recommend avoiding the use of grid classes and presentation classes on the same element for just this reason. Your list-block-item should work independently from whichever grid container it's in.