Changing static HTML to responsive...

User 188640 Photo


Registered User
895 posts

I was hoping to not come back to this thread without a finished project.

I have this site looking pretty good except the header was acting up. So, I rebuilt the header using no background for the images. I got it looking sort of OK from phone up to a point in desktop and then it starts acting weird. At the 1187px point it looks OK but if I move to 1188px the header jumps.

I would like some critique on what I have so far with the header. If anyone sees anything from there down that would be nice to know as well. My main concern is the header.

I don't remember if the link to the contact page is active or not. I have to finish up the contact form.

Here's a link to my test site: http://mytestblog.net/harbormod3/

Here's a link to my file: http://mytestblog.net/RSD/

Thanks for taking yet another look.

I am beginning to wonder if I have to many programs on my desktop computer and may have a conflict. I just ordered a laptop for nothing but my web building software. I guess when it gets here and I give it a name it will have to be something like My Coffee Cup. :D Anyone else want to throw out name suggestions?
A Rose is Just a Weed in a Corn Patch!
User 232214 Photo


COO
827 posts

Ernie Hodge wrote:
At the 1187px point it looks OK but if I move to 1188px the header jumps.

Make sure to place your cursor to the right of the 950px breakpoint. Select the header row and set margin-left/right to auto to keep this row centered too.
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 188640 Photo


Registered User
895 posts

Bob,

Thank you. I knew I had probably missed something important.

Did you happen to look at what happens when you change from 1188px to 1187px. This has me stumped and is probably another miss on my part. I think I may have a few minor tweaks down to about 900px but below that it looks good. (I think.)
A Rose is Just a Weed in a Corn Patch!
User 2023679 Photo


Registered User
141 posts

Ernie . . . if you are talking about the boat graphic on the right (which jumps up and down as the screen size changes), that is your top column margin that the graphic is inside of. When your slider in RSD is all the way to the right, that top margin is set for 44 px. When you slide it to the left past the first break point, that margin is set to zero for that break point, which causes the boat graphic to jump up. Then at the next breakpoint, it is set for 49 px, which causes the boat graphic to jump back down again.

So go to that first break point (the one that is currently set to zero) and set the top margin of the right column to 49px. Then just check as you push the slider to the left, that all the other breakpoints are okay still after making that change.
User 188640 Photo


Registered User
895 posts

Michael,

My first two breakpoint margins were both 44px.

So I got mad and started the header over. I didn't do any margins or padding and the header looked fine all the way down to phone size. (Other than the elements being scruntched together.

Then I decided to drop out the fishing picture (which I can't stand but we all know how clients can be) at the 2nd breakpoint (883) and the manure hit the ventilation system.

I have re-uploaded the file and site to the previous links. It has the header I just broke and the same header with out any columns hidden.

This may turn out to be a support ticket but I'll let Bob or Scott make that decision. I have to sign off as we have a thunderstorm rolling in and don't need to fry a computer. I'll check back later this evening after the storm has passed along.
A Rose is Just a Weed in a Corn Patch!
User 2023679 Photo


Registered User
141 posts

I just made that one change, and the deal with the boat graphic was working. . .

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

So it sounds like you had something else happen. You have one breakpoint that is under (or half way under on my screen) the right hand pane, so that it is hidden. That can create some challenges in the work flow.
User 2764672 Photo


Registered User
17 posts

Hello Ernie...
I don't use RSD but I've got a valid interest in why I could not understand how it works so I keep an eye on this forum for a clue to what I missed.

All my responsive sites to date are created with DreamWeaver or a text editor. All of them resize images as the site gets smaller. All of them use 'Bootstrap' which has a responsive routine to resize images.

None of your image seem to be using any sort of "resize or responsive" statement or call a script to resize them as the site need to fit on a smaller screen. When I tried to view your test site on a mobile phone, it behaved as if it was a static site.

Is the 'mytestblog/harbour' your original static site with RSD header information added to it or did you create this site entirely in Responsive site designer?

I'm no expert with Coffeecup software even though I bought a lot of it. I've built 6 responsive sites and have 8 more queued for conversion. All of them have passed muster, so to speak and incorporate forms from Web Form Builder.

I haven't looked through your style sheets but there seems to be some information either missing or perhaps RSD uses a completely different method to the one I use to create a responsive site. The responsiveness of my images comes from a Javascript file on a remote server that developers subscribe to but there is an open source variety freely available. I can't see either of these being being used on your site. Perhaps visual lightbox does the resizing?. If it does, it still has to be 'called' for an image to use it.

I use the Bootstrap system myself but regardless of what method is used ...for a site to resize its images, it has to call 'something' to cause the image to resize. I'll use your img37.jpg as an example.

If the description: <img src="index_files/vlb_thumbnails1/img37.jpg" alt="img37"/></a> were on one of my sites, it would look like this: <img src="index_files/vlb_thumbnails1/img37.jpg" alt="pic3" class="img-responsive"> Maybe a pull or push statement with it.

As an example of what I'm saying, open your mytestbog.net/harbor site in a browser and squeeze the sides of the browser down to its minimum. The pictures at the foot of the page don't resize or reorder as the screen size gets smaller. It behaves like a static site.

Now open http:/www.planweddings.com.au and do the same thing. Notice how the 1920 pixel wide image at the top of the page resizes to fit in the smaller window? So do all except one the other pictures on that page. They rearrange themselves in a vertical order as they respond to screen size too.

If your 'testblog' is created entirely in Responsive Page Designer, I'd genuinely like to help you work out what is preventing your site from behaving responsively. I went through weeks of trying to understand Adobe's 'break point' methodology before giving up. I spent considerable time trying to understand the 'Foundation' system too.

Then I thought that 'seeing' what you created in a style sheet would be an enormous help... That's when I bought RLM (and a bundle of CC software). I'm still not able to figure RLM Pro out either.

I hope there is some information here that helps you work out whats not working.
Regards,
Ryadia
User 188640 Photo


Registered User
895 posts

Ryadia,

I think you're looking at one of the first links that I put up in this thread. Here's the link to where 'we' are at on this site (I say we because a number of people have helped): http://mytestblog.net/harbormod3/

I actually have another install with a really nice picture at the top over the main text box. It looks like it may work better than the header that's on there now. I just haven't been able to make contact with the client and don't know if they will get rid of the 10 year old graphics that they have on their site.

The Visual Lightbox was one of the biggest pains as it wouldn't go responsive with the usual install on the site. Eric came up with a work around which is great.

I messed up when I first built the 'menu' section and that caused a lot of headaches for me. I changed the structure and now it works fine.

I do have RLMP and it does have a learning curve but when you get used to it you can build some nice frameworks and then import into RSD.

I'm definately not an expert in either one but I'm learning. And 'with a little help from my friends' (thank you Ringo) 'I'll get by". :D

If you haven't gone through the articles for RLMP you should do that. There's a ton of good information there that explains a lot about how it works (RLMP).

Thank you for you post in this thread.
A Rose is Just a Weed in a Corn Patch!
User 122279 Photo


Senior Advisor
14,455 posts

Seems that the site Ernie is working on has undergone a lot of changes since last time I viewed this thread. Maybe actually too much, like in 'too many cooks...'

I have not scrutinized the code or the rsd file this time (have too many jobs to work on), but I don't think it is productive to start comparing with Dreamweaver and other programmes, nor other grid systems. RSD has the ability to make fluid images, it depends on the user whether those tools are being used or not. I'm by no means an expert on RSD, I'm learning by picking up other people's mistakes and trying to find a solution (thanks, Ernie! :P , I'm learning a lot following this thread! )

Right now I'm only thinking of the result, and I have two suggestions: Let at least one of the two top images be visible throughout, and for small screens, give the lightbox images more screen width (in % of the viewport).
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

I don't understand why this thread was moved to the website design section. This was about a couple of issues with RSD and then about a three column header not doing what it is supposed to when I dropped a column out at a breakpoint.

Scott, can I reply to the email you sent me?

Inger, I don't like either of the graphics on the site and I'm trying to get the client to give up their 7 year old website and graphics.

Thank you everyone who participated in this thread. I won't post in here any more and if the admin wants to close this please do so.
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.