Basics: CSS issue when adding building block

I downloaded foundation via the “complete” (download everything) link. I use CSS and not SASS. I also downloaded the template with the blog and right column sticky menu.
I am having a couple basic issues:
1.) I added the building block “news image gallery” and it is stopping at slide 2 and will not advance using the side or bottom controls. (I downloaded html and css)
2.) I downloaded the building block “marketing site 3-up feature section” and it stacks vertically instead of horizontally. (I downloaded html and css)

I was hoping there was an upload file for this forum as my code/site is behind a company firewall.

I have links to my additional css (zurb.css - aka, css provided by the building blocks)
css/zurb.css
css/app.css
https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css
js/app.js

However I get an error in the developers console Failure to load resource server responded with a status of 404 error foundation.
I have in my html, Top bar, followed by: splash screen, 3-up, slide gallery, blog column, table section, 3-up (yes I tried it in another place), (right column) w/sticky nav, circular pagination, footer.
If order matters…

Not sure what I am doing wrong or linking wrong. I just tried changing my css/js links to absolute links with no change in my layout.

This is probably an old template. We did not yet update the old templates to use the new XY grid.

These may still use the float or flex grid.
You can get the needed versions from https://unpkg.com/browse/foundation-sites@6.6.3/dist/css/

I’m not sure about issue 1. Did you download Foundation Sites 6.6.3?

Please always specify the exact version.
Can you provide a working codepen (https://codepen.io/) so we can reproduce this?

You can use the following codepen which already contains the css and js of Foundation and fork it at the bottom right: https://codepen.io/DanielRuf/pen/rNOyrKN

I tried adding everyone of those css files one at time, none made the three-up section function, I gave up and noticed on your working foundation site a page that had smallfeatures icons also three-up section, which I copied your css and html and that worked for.

I downloaded the 6.3 version which is your “complete” (download everything) link.

So the news slider…
I re-downloaded it (6.3) and replaced the app.js and app.css and I overwrote my zurb.css to make sure I had the right news slider css.

It still locks at slide 2. I had it working at one point before I started this thread… not sure what I did to make it not work which is why I replaced it’s code. What else other then the css and html does this news slider rely on, as those must be the issue.

I guess you mean 6.6.3. 6.3 would be very old.

Keep in mind that you still need motion-ui too.

Yes 6.6.3
So I never downloaded any additional items labled SASS since in your downloads you mention I can download a CSS version which I did. So since I had the new slider working without the motionui I wonder how do I add this SASS/? component or library on top of my CSS?

Also is this library required for that cool particles effect under a splash component?

I am new and non-sass so any guidance is appreciated.

Also, I get this error in the console: Failed to load resource: the server responded with a status of 404 (Not Found) Foundation:1

There is a motionui CSS file.
https://get.foundation/sites/docs/motion-ui.html

https://unpkg.com/motion-ui@2.0.3/dist/motion-ui.min.css

Well, a URL would help. The network tab in your browser should show you which exact URL can not be found.

Which effect do you mean?

Error console links here with xxxxxxxxxxxxx representing our domain which I don’t want to come up in search engines, https://xxxxxxxxxxxxxx.com/groups/Site_Services/site_ops/agile/css/foundation
Which you won’t be able to get to unfortunately :frowning:
I have this link which I thought was all I needed, maybe thats the issue if I need something ina foundation folder.

I would love to implement this library on my splash page with a title.
particles.js

motion-ui is a Foundation specific library and not for particles.js.

Regarding the error, it looks like you forgot the file extension.
At least one of your imports / linked assets uses the wrong path.

You can click on the line number on the right side to see ehich line in your code causes this.

Not sure which link you mean regarding the /foundation without any file extension.

The motion-ui library fixed my news slider, thank you!

Regarding the error, I checked, did search through my html, I do not have any files linked to /css/foundation … there is a foundation.css doc in my css folder but I do not use it as I am linked to the min library. At the base of my html there is the jQuery library link and a link to the cdn library for foundation.js … I looked for a line number and the console did not have any, perhaps the error is related to the fact we are behind a firewall?

Check the network tab and console in Google Chrome. There should be a reference to the file and line which causes this. And in the network tab the initializer or similar should show this too.

No, a 404 (file not found) has not much to do with a firewall.

It looks more like some relative path issue caused by some CSS file, for example a wrong url() entry.

Console / Network Image

Well I guess we can only check that if you create a reproducible testcase.

If you want to debug that further use the unminified jQuery version, host it on the same server / website, try removing markup / content, check the network tab and the initialtor (there should be more lines, also when you click on it), …

It can also be that some scripts dynamically add HTML so the line number is not correct.

Hey Daniel,
I pointed to the full (non minified) jQuery file on the server and the error disappeared. I did not remove any markup or content. What does this say about things? I guess their fixed?!

This should normally not happen with the minified version.

Also please try to download https://unpkg.com/browse/foundation-sites@6.6.3/dist/js/foundation.min.js and selfhost it on the webserver, do not use the CDN versions as these could be affected by your proxies and other things and these also affect the availability and data privacy (what if the CDN goes down or collects user data?).

Thank you,
Just downloaded it!

rad, have you found a solution to your problem? having the same issue with adding building block with my food recipes project. will download as well, but i was wondering if you found a solution and if you could update. thanks

Hi, what exactly does not work? The building blocks probably use the old float grid instead of the new xy grid.