Positioning parents/childs with CSS

Need help Mobile
1

Hi everyone. I need some help with an issue I’ve been struggling with for some days. I’m trying to set the position of some elements via CSS code but I can’t get it to work as expected. In my page, I have the elements index → MENU_finder > Group finder_card, and I want the element MENU_finder to be positioned with respect to index, and Group finder_card with respect to its parent (MENU_finder). The code I have is as follows, and is placed inside an HTML element at the index level:

image
image1344×1298 127 KB

The output is:

image
image546×962 12.8 KB

I don’t understand why the element id_menu_finder_card is not positioned at (top: 0px, width: 0px), even though I’m setting that position in the CSS code. I’m sure I’m getting something wrong so any help would be very much appreciated.

Thank you very much.

2

Anything in the box when you open the dev console? Box as in “box model” (:

3

Thanks for your answer vini. The layout in bubble is as shown below:

image
image400×763 5.13 KB

and when I run in preview mode this is what I see:

image
image1102×563 40.7 KB

As you can see, the element id_menu_finder_card is a child of id_menu_finder, but it’s not positioned well. I understand that this has something to do with the position and size of the element in the layout, but I don’t understand why it doesn’t bypass that style when I’m setting the styling in the CSS code :S

4

Ah, is it completely isolated from Bubble elements? Could it be ported to https://jsfiddle.net/?
If so, please do, we’ll be able to debug there (:

5

In jsfiddle I don’t have this problem, and everything is positioned as expected:

image
image1071×871 25.8 KB

I think that the problem comes from the fact that in Bubble I’m specifying both a size and a position (x and y coordinates) and this interferes with the size and position I specify in the CSS code. What do you think?

Thanks again!

6

That’s weird, try seeing if any global css from Bubble is being applied and you’re not overriding it.
Also, some CSS properties work differently, or just don’t work at all depending on the configuration of the parent divs. I’ve ran into such problem before and took some time to figure out it was that.

7

What do you mean with global CSS? :thinking:

Thanks again!

8

CSS that is applied to generally every div in the page

9

Mmm I’m not really sure tbh…the only place I’m writing CSS code is inside an HTML element I place in the index page :woozy_face: