Changing static HTML to responsive...

User 188640 Photo


Registered User
895 posts

Some of the text needs a lot of tweaking and is not finished yet as far as 'looks'.

I'm going to try and rebuild this from scratch using Eric's way of setting up the Lightbox and then figure out why my columns are sort of staggered in the section right below the header at smaller widths.

I'm trying to have a one pixel black border around it at smaller sizes like it has at full width. I'm not sure if I built this section using the correct elements.

I'll have time this evening to work on it and I do appreciate everyone helping with this project. I'm learning a lot but I think my weak point is the position settings. I'll get up to speed but it will probably take a little while.
A Rose is Just a Weed in a Corn Patch!
User 188640 Photo


Registered User
895 posts

I had to come back in here before I go to work. I was trying to start from the top and get the header all fixed up and ran into a problem. I didn't have my border around it. After checking all the areas in the header I found there were borders attached that I didn't add. I can get rid of all but one and I finally had to quit and closed the file without saving any changes.

Just for future reference, when I post a file, my file will probably not have a lot of text or alignment formatting.

When I built this file I was originally using rows and columns and Bob mentioned I had not used the grid. I had a tab that was labeled grid so I went to using sub-grids with containers. That helped this layout a lot. Am I starting my projects off wrong? What's the proper way of structuring a layout?

I've read through all the RLMP articles and maybe I'm missing something really important. When pure technical mined people write articles I think sometimes they overlook that they are not writing for their mindset and I have a very mechanical mind.

I know I must have messed up somewhere in this file and I guess I need to start over but I need to know the proper way.

Eric, please give me a little start up advice. This is a one page site excluding the contact page and I should have had this finished in a day and here I am ten days later sort of back at square one. At least you figured out a good way to get around the lightbox thing and Inger and Michael have helped out as well.
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,461 posts

I don't know, of course what Bob said and meant, but the grid is kind of the 'container' for all the rows and columns, and that is what you see when you boot up either RLM or RSD; a grid with two rows, one of them divided into three columns of different width.
It seems to me that you have not used those columns for what they are meant for. You can adjust the width and the number of columns across a row (inside the grid). You don't need to have all the columns as wide as a row and then stick a bunch of subgrids with a new set of rows and columns inside it to divide it up. That is like, if you think of the Html Editor, having unnecessary divs inside divs inside divs, if you see what I mean.

A subgrid should be used, if I have understood it correctly, if you need to subdivide a column - and not a whole row - into smaller units. I haven't worked so much with that, but I think they can be used e.g. if you want to line up something to look like a table (correct me, Eric, if I'm wrong here!).
So, maybe you should keep it simple and use the 'outer' columns instead of making 'inner' ones?
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2023679 Photo


Registered User
141 posts

I got your columns so they work. Here's a that RSD file with the changes:

http://www.puppetsandprops.com/files/Ha … sMod3B.zip

Yeah, I couldn't tell what all was going, but it seemed to have something to do with the subgrids and/or containers. So I just started from scratch on that section. Only took a few minutes really. Here's what I did . . .

I started fresh with a new row. Clicked on column (there's just the one column in the new row), set the background to white, and rounded the edges. Then I dropped in a subgrid, added a few more subgrid rows, divided subgrid columns where needed to get the basic structure/layout of this section. The I just took the headings and paragraphs you already had, copied and pasted them into the new subgrid columns where they needed to go. I did not find it necessary to use any container elements. You don't need them for what you were trying to do and can make things more complicated than they need to be.

Then I just did the adjusted the span sizes for the various break points, and changed a couple of margins in a few places to get the fine tuning done on it.

So maybe that will help, and you can use it as a reference as you work in it. I can completely understand you wanting to do it yourself so you can see how it all works and understand the program better. I'm the same way. I don't think you need to redo the whole page necessarily, just that section. What I did was keep the old section there, and I built the new section just below it. That way it was easy to copy and paste the headings and paragraphs (make sure if you do that to ONLY copy a heading or a paragraph, and not a subgrid or container with it). Then when the new and improved section was just right and completed, I deleted the old section. Voila!

One other thing of interest. I noticed your RSD file is Coffeegrinder DDE instead of the default Coffeegrinder DDP. I don't know if that has anything to do with what I was experiencing, but I noticed the RSD program was a lot buggier to work with in that mode for some reason. It took me a lot longer to get things done because a bug would happen, and then I'd have to shut down the program and reopen the RSD file.

In any case, hope the file example I did helps you.
User 187934 Photo


Senior Advisor
20,193 posts

I removed a subgrid to do my task. You pretty much have it Inger. I don't think Ernie needs them for what he's doing unless he's after a look and control I don't see.
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 2023679 Photo


Registered User
141 posts

Your right guys. Don't need any subgrids to do that. Here's the same file with the menu section done with a row and columns only (no subgrids) . . .

http://www.puppetsandprops.com/files/Ha … sMod3D.zip

I don't think I got enough sleep last night! :P
User 188640 Photo


Registered User
895 posts

I just got home and found all the new posts in here. I guess I misunderstood what Bob was trying to tell me so I am going to see what Michael has come up with.

I thought containers were what we were supposed to use in that situation. I am going to do some work on this tonight if I can get through Michael's file and understand what he's done. Thank you Michael for taking your time to do this.

Thank you Inger and Eric for your contributions to my questions.

Maybe the containers inside columns and subgrids have to do with the alignment issues. Do we just insert a subgrid into a column? Is that how they are supposed to be used?

I must have missed school that day. :-)
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,461 posts

You CAN insert a subgrid into a column, but you shouldn't do it if you don't need that extra subdividing that I mentioned before.

I will not elaborate on containers as I haven't used them much, but my understanding is that they hold something together, like a Google map, a video, an iframe, a slideshow, things like that.
Ha en riktig god dag!
Inger, Norway

My work in progress:
Components for Site Designer and the HTML Editor: https://mock-up.coffeecup.com


User 2023679 Photo


Registered User
141 posts

Yes, you can insert a subgrid inside a regular column. That's where they go if you need one. You can't put them anywhere else as far as I know. But that's why they get a little tricky to work with, because they are nested inside of a column when you work with them.

But I agree with Inger and Eric, that on that menu area (just below your header), you do not need any subgrids. See my 'last' RSD file posted. No subgrids used, but lays it out like you were looking to do.

Actually, I enjoyed doing that Ernie. Hope it turns out to be helpful. If you got any questions on what I did, just ask.
User 188640 Photo


Registered User
895 posts

Thank you Inger and Michael.

Michael, your file was very helpful and I can see this project getting finished very soon with everyone's help. I 'THINK' I now have a better understanding about subgrids.

I had the header built using subgrids but couldn't get the borders to work correctly. After working with your file I may have figured that part out. It's late for me and I've had another long day so will say good night to all and thank you all again.
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.