Does DivHunt only apply media queries to Tags? Should I only use classes to apply 1-2 style changes (eg like utility classes)

Questions
1

I am trying to create some simple components (eg Section Title + Paragraph) which are responsive. I am finding that the style changes I apply to a class are not being captured by DivHunt.

Are media queries only automatically applied to tags?

I heard in one of the tutorials that DivHunt does not use Combo-classes. Does that mean classes should only change 1-2 specific style values (utility/atomic classes)?

I’m still struggling with finding a workflow to create reusable elements across my website.
If you could please show an example of how to create a Heading + paragraph component (centred on the page) with text-sizes that shrink responsively with smaller viewports I’d really appreciate it!

Thanks

2

Hey @AlwaysBeLearning, the best way to achieve this is to set styling globally on each tag.

  • Select the Heading 1 global tag and set its initial font-size, let’s say 60px
  • Then go to the smaller breakpoint, tablet, for example, and with the H1 global selected, set the smaller font-size for the tablet

With this method, every Heading 1 you call on the page will inherit the same global styling you set, and it will automatically adapt the size on all the breakpoints.

You should do this for all Text tags (Heading 1,2,3,4,5,6, Paragraphs, etc…)

If you need to adjust the size on one specific Heading 1 tag somewhere, you should do it directly on the tag without selecting the global, or by assigning the custom CSS Class.

A very important thing to mention is the hierarchy. There are 3 selectors for styling:

  • Global styling
  • Custom Class
  • Tag

Hierarchy:

  • Global style (Pink indicator) is the wickets, meaning Custom Class and Tag will override those styles.
  • Custom CSS (Purple indicator) will override the Global styling, but it’s wicker than editing the Tag directly
  • Directly editing the Tag (Blue indicator) is the strongest and it will override both Global and Custom CSS properties/styles

You can find more info about this in the video tutorial: https://youtu.be/Wfiez2kf0nU

In response to your question about combo-classes: we currently don’t support them. This means that any class you create can be used universally for every tag you apply it to.

Hope this answers everything, I know it’s a bit confusing at first, but it’s really not at all once you figure the system out. It’s the classic CSS standard styling system.