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
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âŠ
