Highlighted

I just want a responsive frontpage

Community Beginner ,
Oct 23, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional

Views

341

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more

I just want a responsive frontpage

Community Beginner ,
Oct 23, 2018

Copy link to clipboard

Copied

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

Adobe Community Professional

Views

342

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Oct 23, 2018 0
Adobe Community Professional ,
Oct 24, 2018

Copy link to clipboard

Copied

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


Ben

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 24, 2018 1
Adobe Community Professional ,
Oct 24, 2018

Copy link to clipboard

Copied

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.

Nancy O'Shea, ACP
Alt-Web Design & Publishing

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 24, 2018 1
Community Beginner ,
Oct 26, 2018

Copy link to clipboard

Copied

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

-Brian

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 26, 2018 1
Adobe Community Professional ,
Oct 28, 2018

Copy link to clipboard

Copied

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

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Oct 28, 2018 0
hans-g. LATEST
Adobe Community Professional ,
Nov 01, 2018

Copy link to clipboard

Copied

... now it works! Thanks.

Likes

Translate

Translate

Report

Report
Community Guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
Reply
Loading...
Nov 01, 2018 0