I just want a responsive frontpage

[crylock]

I've been trying for months to create a responsive frontpage, with only a limited understanding of HTML. Recognizing my limitations, I tried adapting a Bootstrap template, but the result failed-- when I put it online, the "cards" (I had a horizontal row of 4 clickable images, with text underneath each one) turned into a single page-wide column of flush-left text, and the images don't load, I just get some clickable text that says "card image cap".  Also, it's not really responsive, except that the text arranges itself to fit on my phone's screen, way over on the left edge of the page.

This attempt is what is currently visible on my site, at crylock.net.

I've made another attempt, using a downloaded template, and it works okay in Dreamweaver, as long as I keep it in the folder it came in, with several other subfolders supporting it.  I've named it index.html, but I can't figure out how to make it replace my existing index page while keeping it in the folder, and when I take it out, of course everything collapses. I have no idea if it will "respond" to smaller screens, but the site I downloaded it from said it would.

I would be happy if I could solve either of these issues. Either of these two pages would be satisfactory, if they would just work, and maybe respond to smaller screens in some visually sensible way.  Can anybody tell me what I'm doing wrong?

I'm using a current version of Dreamweaver CS, and Windows 10.

Thanks,

Brian

[BenPleysier · Accepted solution]

The website shows that you have not uploaded the support files to the remote server. The files are

• http://crylock.net/css/bootstrap-4.0.0.css
• http://crylock.net/js/jquery-3.2.1.min.js
• http://crylock.net/js/popper.min.js
• http://crylock.net/js/bootstrap-4.0.0.js

[Nancy OShea]

As Ben said, upload your js and css folders to server.   In addition, you have some code errors that need attention. 

Showing results for http://crylock.net/ - Nu Html Checker

On the web, you must not use spaces in folder or filenames.  You need to rename your images (F2 in the Files Panel) without spaces.

[crylock]

Thank you, Ben and Nancy!  I did as you suggested, and it fixed my problems! You are both awesome to behold!

-Brian

[hans-g.]

Hello crylock,

fine that you could solve your central problems. Being an inquisitive sort of chap , I clicked into one of your story pages. There - for example - my browser could not find the promised larger image at chapter 1 (F03.html) of your Story page . You may control, whether you have uploaded all your *.html (or the corresponding images) of your interesting "story board".

Hans-Günter

[hans-g.]

... now it works! Thanks.