It is indeed possible that Bubbleās CSS overrides your code, but it might also just be the HTML structure of the page.
Every object you place on the page are contained in a box (parent div). So your element might have itās auto width enabled, but may be constrained by a parent box that has a fixed width.
I suggest you use the developper tools of your browser to explore and understand the HTML structure. The dev tools also allow you to bring changes to the page without reloading it.
@evanlitttle, I can see a couple reasons why your setup doesnāt work.
First, the Classify command you wrote in the ID field is incorrect. It should read addClass rather than add class.
Second, did you include the animation.css file in your page? Thatās what suggested on the web site:
Third, in the HTML element youāre trying to recreate a class with a CSS command that, to my knowledge, does not exist. Since the animation classes are provided in the animation.css file, you should not have to declare new classes. From what I understand, to make a element bounce, you would only need to write this in the ID field:
{addClass: "animate__animated animate__bounce"}
Thanks so much Julien. I think I added the animation.css file to the page correctly. I pasted that code info the html header of the page
Updated the id field of the text as mentioned but the text is not bouncing, maybe I have not added the .css file correctly?
{addClass: āanimate__animated animate__bounceā}
you should remove the <head> tag since the page already contains one (your putting the code in the HTML Header after allā¦
Thanks Julien. I am not very familiar with html and css so just trying to get aquainted here and learn how to add more dynamic animations to Bubble sites in the future
Hi @julienallard1,
Thanks for the great plugin. Super useful.
I tried using this in my app to implement responsive height. I am running into issues because of divs called bubble-r-box which bubble auto-creates while rendering the page. While the classes I am adding reduce the height and width of the element, the bubble-r-boxes remain at a larger height and push elements away from the desired position.
I am trying to show cards having a cover image and some textual details inside a repeating group.
The editor view is:
I have applied the following classes in order to make the elements responsive:
As you can see from the screenshot below, the classes get applied:
But the bubble-r-box screws things up 
Any idea how to get rid of this and position the elements the way I actually desire? Any help would be much appreciated since in the absence of a true responsive height solution I would be forced to make separate mobile pages and that is no solution at all
Regards
Akhil
hey @akhilpuri2003, Iāve hit the same problem a few times and itās a bit frustrating. The things is that the bubble-r-box elements are contained in bubble-r-line divs. And probably that this bubble-r-line element is in a parent group which is also in a bubble-r-box in a bubble-r-line. So even if you change the size of the immediate bubble-r-box your design will remain broken but just one level upper in the HTML structure.
In CSS you can only refer to the descendants (children) of an elements, not the ancestors (parents). So you need to rely on some javascript to work upwards the HTML structure.
If youāre familiar with javascript, it could end up being easier to literally code your own list in an HTML element then trying to hack a workaround with the existing repeating groupā¦
Hey @julienallard1, thanks for the response. This is a little saddening. I do know a little bit of Javascript because I started a basic web developer course along with learning Bubble, but I donāt think I am anywhere near proficient enough to be able to accomplish this.
Can I trouble you a little further to ask if you have some sample code from one of your projects where you used Javascript to accomplish this? I am currently looking at hacking the repeating group instead of coding everything on my own because doing so on every page just seems infeasible for me.
There are 3 elements that need to be targeted as far as I can see- bubble-r-box, bubble-r-line and their parent with classes ābubble element GroupItem group-item entry-xā, where x is the number of the item in the repeating group. If you can provide any guidance on what the javascript for targeting even one of these would look like, then I think I can figure out the other two on my own.
Thanks
Akhil
Hey @julienallard1,
Nevermind- I managed to play around and figure it out thanks to you and @w.flyās answer on Collapsing Buttons Horizontally.
I ended up using jquery to target the bubble-r-box and its parent and add the same classes with responsive height and width to them. The rest fell in place on its own. Thanks for your help. I am pasting the updated screenshots for anyone else who might be facing a similar issue. I used the toolbox plugin to run the javascript in my workflow.
This now gives me great hope that I should be able to maintain only one version of the site instead of having a separate mobile page, which would have become a major hassle over time.
Cheers
Akhil
@julienallard1 is it possible to DM you about a project?
sure 
Really impressed with this plugin! With classify u can bring good Web Development practices to your Bubble app.
5 Stars man, well done!
Appreciate the feedback, thanks!
Hi, will your plugin help me implement the ideas given here?
hey @kromachee, I havenāt had the time to read all of the articles you posted, but they are talking about good practice in animation.
Iād say that if Bubbleās built-in animations donāt suit your needs and if you want complete control over the animation, I believe you need this plugin and also, probably the plugin Toolbox.
Super! Thank you for your answer!
Hi @julienallard1! Thanks so much for creating this.
Iām guessing Iām doing something simple incorrectly but have checked the syntax multiple times and the button is not changing styles. Would you mind taking a look at these screenshots to see if anything jumps out?
Much appreciated.
Kat
hey @kat
While itās hard for me to find the issue with the screenshots, hereās a few points:
Some of the properties like width and height are defined by Bubbleās engine in a style attribute directly in the HTML. In CSS, style attributes have priority over properties from <style> tags. I know itās not best practice in general but you can use ! important to override Bubbleās styling. Personally I always begin with no ! important and then in preview mode I inspect the element with the browserās console to see which of my CSS properties are ignored. Then I add ! important to those.
I can see that youāre altering the buttonās position with top and left. While it could/should not pose a problem, itās good to know that every Bubble element is wrapped in a parent container <div> and all parent containers are gathered āby lineā into parents <div>. That said, top and left will only change the position of the elements, without the parents. I suppose in some situation it could cause some glitches in the UI.
You have 2 conditional rules for your Button Primary. If one of those is true on page load and affects the ID Attribute, the command on the appearance tab will not be applied at all.
While this does not cause any problem, you donāt need the ID Attribute {addClass: "button-primary"} on the HTML elementā¦
If you still canāt get it to work you can PM a link to your editor so I can have a look.
Wow, thank you! Oh man I didnāt even catch the conditions. Removed them.
I removed width, height, top and left, as well as I actually donāt need them and am just new to this so didnāt catch their actual function.
I also removed the Conditionals and the unnecessary link on the HTML ID Attribute.
Hereās the code from AdobeXD as well as the link to the editor; I put this in a yellow box so its easy to find.
Ps you should charge for this!! 
Replied you in PM since my answerās specific to your caseā¦
