CSS class does not work as expected

Hey guys,

I did not figure out how to make this classname-field work.
As you can see in the image below both images share the class-name “test”.

However it only works, when I add code:

What am I doing wrong?

Cheers, Oliver

1 Like

share your document so we can see exactly how you are adding the styles

I have a feeling you are adding styles to the Head HTML and unticking “protect from external stylesheets”

In order for elements in Hype to take on Style information (that can be used in the Inpector) you must use !important after the declaration e.g

.text {
    background-color: red !important;
}
1 Like

I think I have the same issue. I have !important after my line. Yet, it is not taking my Class name? I have set the class to change the text size to 6 vw but it retains its original font size as per the Inspector?

Class name.zip (440.5 KB)

Did you deactivate „protect from external CSS“ in the document panel?

Yes. And after reading your note, I removed it. Didn’t change the preview outcome.

I think You might have your naming scheme incorrect.

In your example you only have one element given a class name:
class “Text6” (“Birthday” text).

In your CSS one of your references (line 84 of script) to this class is:

.Text6 div {
  font-size: 6vw !important;
}

which does not work of course.

But this does:

div.Text6 {
  font-size: 10vw !important;
}
2 Likes

And that’s it! Thank you!

Is there a general CSS naming scheme thread that works for Tumult? The earlier naming “did” work in Saola … I am a recent convert!

1 Like

In the back caverns of my memory I recall that the element is given first then its class…

Just confirmed this - but possibly there are other ways than these examples:
https://www.w3schools.com/cssref/sel_class.asp

Don’t know why “Saola” worked.

2 Likes

The first selector targets elements of type div below parents that are assigned class .Text6 (note the space!)

.Text6 div {
  font-size: 6vw !important;
}

The second selector is chained (no space) and targets specifically only div elements with class .Text6

div.Text6 {
  font-size: 10vw !important;
}

Hope this clears things up.

As to why the first worked in Saola. My guess: They seam to render a div into their container. In Hype the element itself is given the class.

1 Like