Tue, Oct 19, 21, auto-focus media-query google-font

Thi

Terms

  • Font ligatures: When you type = + >, it becomes ⇒.

Auto focus on an input field when page loads

Just add autofocus into the <input> tag.

<input name="q" class="search" type="search" placeholder="..." autofocus>

Separate a list into 2 columns

And make it into 1 if the screen is small.

<div class="two-columns-list">
  <ul>
    <li></li>
  </ul>
</div>

.two-columns-list {
  @media (min-width: $grid-md) {
    @include column-count(2);
    & > li {
      padding-right: 10px;
    }
  }
}

@media not working

When I use bootstrap, the @media is not working when I change to mobile use, try to add below line to <head>,

<meta name="viewport" content="width=device-width" />

Useful URLs

The following wiki, pages and posts are tagged with

TitleTypeExcerpt