CSS from multiple resources

Community resources General
#1

I think we all recognize we want to use and reuse code generated in widgets made by others.

We also recognize that Webflow does not off the ability to implement all the cool stuff front end codes do with CSS. It’s a dark art really.

So we have links to any number of third party widgets and the JavaScript and the CSS. But they are links. That doesn’t really offer Webflow users access to CSS source code developed and linked to our site. Hmmmm

In dev tools I can look at something like this:
image

and I can see what’s going on: what CSS is affecting what elements. But Webflow adds code we don’t have access to and the third party (splide in this case) doesn’t either… Here is some CSS
image

This CSS affects and element (a div I think) such that it CALCULATES the height of the div so that is is square. 600px by 600px. Dev Tools does not offer a location where that code originates either from splide or from Webflow. The impact of the rule is that the constraint (height) cuts off my content.

So here is my site location…
https://preview.webflow.com/preview/helps-austin-project-9b22c7?utm_medium=preview_link&utm_source=designer&utm_content=helps-austin-project-9b22c7&preview=e574810cf78337ed6b5507f796b40e73&pageId=63b34c4bfe5f636f1b1a9260&workflow=preview

The particular page contains is item idea 1
and contains about 5 slides. Some of those are cut off at the bottom

Any CSS helps would be welcome. Thanks.

#2

Hi @David_Richardson ,

I am not sure what you are asking here.
Is it - How to get a 1:1 ratio div in Webflow? If so, you can check this out:

#3

Thanks for your reply… I think this is really a Splide issue. The Splide JavaScript creates the widget and I am speculating, adds an inline Style attribute.
Here are two screen shots of the Dev Tools of the particular page. Note that developers can turn off or on specific CSS - in this case it’s in the upper right of the screen.

In the second slide I uncheck the box and can see the change in the length of the div.

image
image1518×842 244 KB

image
image1501×842 264 KB

And in this screen capture I took the JavaScript file linked from Splide
https://cdn.jsdelivr.net/npm/@splidejs/splide@4.0.1/dist/js/splide.min.js

and popped it into a browser, copied the code and then put THAT into JS Fiddle and found this code that looks very suspicious.

image
image796×403 22.6 KB

I don’t think I’ve found a solution, but working on it. Thanks for looking!

Cheers