Changing static HTML to responsive...

User 122279 Photo


Senior Advisor
14,462 posts

Hi,
I haven't seen this thread until now, have been busy reformatting. Also, I haven't got all my tools installed yet, but it seems that the line of text 'Click here to email us' below the images is in some column that is not responsive. The sideways scrollbar comes up when moving from 965 to 964px. Something like that may mess up an otherwise responsive page, so better check 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 188640 Photo


Registered User
895 posts

Inger,

Thank you. There was something wrong with that column that I hadn't noticed and I deleted the entire column and added a new one. Somehow I had two columns and one was 'almost off the page to the left'.

I'm having a bad day so thank you again for catching that mistake.
A Rose is Just a Weed in a Corn Patch!
User 188640 Photo


Registered User
895 posts

I tried a couple of things and now my Lightbox is responsive in RSD. Unless my computer is messing with me it's not responsive online.

I have a couple of alignment issues that continue to be a thorn in my side.

I need to step away for a day or two and get my head in a better place so here are links to the live test site and my RSD file if anyone has time to figure out what I've evidently done wrong.

Live test site: http://mytestblog.net/harbor/

My RSD file: http://mytestblog.net/RSD/

Thanks for any help and I'm subscribed to this thread so I will see any replies.
A Rose is Just a Weed in a Corn Patch!
User 2023679 Photo


Registered User
141 posts

User 188640 Photo


Registered User
895 posts

It's set at Auto. Time for me to call it a night. I'll check back in the morning.
A Rose is Just a Weed in a Corn Patch!
User 2023679 Photo


Registered User
141 posts

I got it to mostly behave. Here's your RSD file with the changes . . .

http://www.puppetsandprops.com/files/ha … ts-mod.zip

I got it to stay centered in a browser as the window gets smaller. And the photos now stack into a single column when it gets smaller,as it should, and they continue to stay centered as the browser gets smaller. The only thing it won't do is that last little bit where the thumbnail photos shrink as the browser window gets smaller than the original size of the thumbs. Maybe someone else can solve that last piece of the puzzle.
User 187934 Photo


Senior Advisor
20,194 posts

Thinking outside the Visual Lightbox.:lol:
Attachments:
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

Brilliant Eric. When I was going over the VLB code trying to figure out what was keeping things from working, I had come to the conclusion that the thumbs had to be separated out somehow, in order to become responsive, but couldn't figure out how to do it. Nice solution. I can see what you did in the RSD file to make it work. I will have to study it a little further to make sure I understand all the nuances, but seem fairly clear already.

Yeah, I had contacted VLB support, and they did email me back, but their answer did not provide a solution. I even mentioned to them, very tactfully that their demos on their website, that the thumbs were not responsive, but they had no response to that in the email. :/

My conclusion had been, after many hours (and many days!) of trying to get it to work (without mods), is that the code the program generates will work fine if it is set to auto and then none of your thumbnails are bigger than the smallest mobile device. It will stack and work fine. The majority of website examples I've seen in the forum here, are in that category (and the vlb's I had done up to this point were in that category as well), so the problem with thumbnails not being responsive won't even show up.

So actually, it was a good thing Ernie's project had the larger thumbnails, which exposed a nagging problem and pushed for a solution. An elegant solution. I played with the settings in your RSD file, and now with the way you have it set up, one can completely control the layout of the thumbnails, however you want them and totally adjust how they size, resize and stack, etc.

I think this solution you came up with is going to come in very handy (until CC comes out with their Lightbox! I'm sure it will be awesome, easy to implement and will work right out of the box! lol!).

User 122279 Photo


Senior Advisor
14,462 posts

I played with Eric's file a bit more and got the green button centered. I also wanted to reduce the line height in the header section, but the programme didn't like that, so I had to leave it as it was. But I think the main headline ought to have a bit more 'weight', and then the line height a tad reduced for small screens
Attachments:
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 187934 Photo


Senior Advisor
20,194 posts

Set the line height by editing the paragraph text. He has it setup with inline styling.
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

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.