Changing static HTML to responsive...

User 232214 Photo


COO
827 posts

Responsive Layout Maker has a 'quick start template' that explains many aspects of the grid and responsive design. We also wrote some articles about responsive grids, you can find the links in this post:

http://www.coffeecup.com/forums/respons … post247804

Getting up to speed with all that is a bit of an investment, but it will pay off in just a few days. I remember getting questions from people that are now the most knowledgeable advisors (nop, no names :P)
The future of web layout has arrived and it's called CSS Grid. CoffeeCup helps you to get ready with a free guide, the Grid Builder app plus cool demos & themes.
User 2088758 Photo


Senior Advisor
3,086 posts

hahaha guilty! :cool::cool::cool:
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA
User 188640 Photo


Registered User
895 posts

OK, since I started this thread I've rebuilt this site starting with RLMP and then importing into RSD. Most of it looks OK but there are some things that I can't get quite right.

I can't get the Visual Lightbox centered which right now is not important since it seems to not be responsive when set to two columns. I'll tackle that later.

At the first couple of breakpoints everything looks OK. But when getting down to the smaller widths the the edges of the columns don't line up. It's like they're off by a pixel one way and the next columns down are off a pixel the other way.

Maybe someone could look at my test site and give me a gentle hint how to fix this. (Or a bold slap in the face here's how you do it.)

The big section under the 'Header' I built with subgrids since Bob said I wasn't using the 'grid'. I don't know if I did this the correct way or not.

I really need to get a handle on this software.

Here's a like to my test site: http://mytestblog.net/harbor/

Here's a link to my RSD file if anyone wants to look through that: http://mytestblog.net/RSD/

Thanks for any help or suggestions.
A Rose is Just a Weed in a Corn Patch!
User 1948478 Photo


Senior Advisor
1,850 posts

Ernie Hodge wrote:
I can't get the Visual Lightbox centered which right now is not important since it seems to not be responsive when set to two columns. I'll tackle that later.

When you moved the Visual Lightbox script links to the end of the <body> section, you also moved the css file links there. I think you need to move these two lines back to the <head> section:
<link rel="stylesheet" href="index_files/vlb_files1/vlightbox1.css" type="text/css" />
<link rel="stylesheet" href="index_files/vlb_files1/visuallightbox.css" type="text/css" media="screen" />
User 188640 Photo


Registered User
895 posts

Per, Thanks. I did that and now my Lightbox is back to 2 columns like it's supposed to be.

But, still not responsive and just one bigger picture with no formatting when I click on an image. Kind of like the other thread you posted in this morning. (http://www.coffeecup.com/forums/respons … culiarity/)

Maybe an administrator should combine both of these posts.
A Rose is Just a Weed in a Corn Patch!
User 187934 Photo


Senior Advisor
20,181 posts

Looks to be a conflict or a missing script.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 1948478 Photo


Senior Advisor
1,850 posts

Ernie Hodge wrote:
...and just one bigger picture with no formatting when I click on an image...

Script conflicts can act in mysterious, unpredictable ways and placing them at the end of the <body> section is no guarantee for success. What works on one page for one particular combination of scripts may not work on a different page having a different combination.
I would try putting the script links back in the <head> section together with the css links (as recommended by Visual Lightbox) and see what happens.
I just tested it on a page of my own, where I'm using Visual Lightbox. There I have all the css and script links in the <head> section and everything works just fine. When I move the script links to just before the closing </body> tag, I get exactly the same behavior as you are seeing on your page, i.e. no popup when clicked, just a big version of the image replacing the page.
User 2023679 Photo


Registered User
141 posts

Hey Ernie. I downloaded your RSD file, bu your files for the Lightbox are not in Resources. I've got a hunch, but can not check it without those files. Need to add the Lightbox folder (index_files) to the Resources (and reesave the RSD file in the link above). You've got an Images folder in there, but that won't make the Lightbox go. :)

p.s. you can center the lightbox by wrapping a this div around it: <div style="text-align:center;"></div>
User 2023679 Photo


Registered User
141 posts

I meant to say: You can center the Lightbox by wrapping the HTML code with this div around it: <div style="text-align:center;">(the code in the HTML element box)</div>
User 188640 Photo


Registered User
895 posts

It's been a long Monday but I tried putting all the code back in the head section and that didn't work for the lightbox. I think maybe to morrow will be better for me with a clear head. Five hours of delivering mail is enough for me today.

I think I need to step away from the computer for the evening.

I'll start fresh in the morning and see if I can get the lightbox issue fixed. Then maybe someone can figure out if I've done something wrong to cause the alignment issues.

Thanks for the help so far.
A Rose is Just a Weed in a Corn Patch!

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.