Relume Community Icon
Relume Community
  • 馃彔Home
  • 馃搮Events

  • 馃數Announcements
  • 馃數General
  • 馃數Getting Started
  • 馃數Issues
  • 馃數Showcase

Powered by Tightknit
Issues
Issues

Adjusting Text Size for Specific Breakpoints in Relume/Client First

Avatar of Sara M.Sara M.
路

Is there a method in relume or client first if you want to change something just on certain breakpoints? i.e. text in a list should be smaller on mobile to fit better but the class is "text-size-large" Any thoughts?

5 comments

  • Avatar of Brandon B.
    Brandon B.
    路

    I think the standard convention is to make a duplicate utility class or to use a combo class with something like is-tablet or is-mobile-portrait. Not certain, though. If I recall correctly, the Relume's style guide cloneable has a hide-mobile / hide-desktop combo class. Something like that would probably do the trick.

  • Avatar of Sara M.
    Sara M.
    路

    thank you Brandon B.. Yes, the style guide does have those combo classes, which works great. But sometimes I'll want to change something and not create a whole new element. For example, I have a list that I wanted the text and icons to be smaller just on mobile.

  • Avatar of Sara M.
    Sara M.
    路

    I ended up creating a new element and did the hide/show on different breakpoints. Wondering if that's the best method though.

  • Avatar of Brandon B.
    Brandon B.
    路

    I gotcha! I've done the duplicate-and-modify approach before for stuff like that. Especially text treatments. E.g., turning text-size-large into list-text-size-large for ordered lists & such. That might not be best practice either, though 馃槄

  • Avatar of Sara M.
    Sara M.
    路

    interesting!