Hello
This is doing my nut in...
I am using the Ecologic template and setting up a website for a solar business.
I have attempted to modify the template to incorporate a second box below the menu.
This initially appeared to work well and changed format very nicely, as the original.
However, I messed something up and can not for the life of me work out what I have done...
Could you PLEASE look at the attached site (zipped) and explain to me
why the home_img.png does not shrink smoothly?
What is the 'secret techique' to getting these boxes and contents, to shrink gracefully?
Initially @ 768 px (or thereabouts .. plus some padding???,) it shrinks to exactly 670 px ...
can not make it function properly, as the original template...

All help appreciated, as would be a simple (hahahaha..a ... ??) manual on shrinking these boxes...

Thanks

Richard
www.camberwellsolar.com

Try max-width: 100%; for the header.

Edit: Sorry, I was wrong. Could you zip up the site and post it? Then I can experiment a bit with the css.

Well, I found it. Check the width of the footer. This is correct:

Richard,

The native size of your image home_img2.png is 641x400px. Since you have a CSS declaration that limits image widths to 100%, the image will never be wider than 641px. When you reduce the viewport width to just below 768px, the space available for the image (plus padding) is 768px but the image will not expand to this width since it is limited to 641px by: img {max-width: 100%}.
To get a "smooth shrinkage" of the image when you reduce the viewport past the 768px threshold, you would need to (1) use a wider image, (2) increase the padding or (3) remove/change the max-width limitation for this particular image. If you allow the image to expand beyond its native size, you may of course see some image quality deterioration...

I hope I interpreted your post correctly as to what it is you see.as the problem, i.e. that the "home_img.png image does not shrink smoothly".
I have not looked at the original theme for comparison.

Hello Per
Thanks for the advice/suggestions.
I was wondering about the image size and was going to get around to that..
Having now made an image of that size, it works perfectly.

I have a lot more questions that will only be answered by trying.. I hope..
Do you know of any good (i.e simple) resources to get to grips with this?

I was wondering what code Inger was referring to as this is the relevant css..

{clear: both;
width: 100%;
font-size: 1.0em;
margin: 0 auto;
padding-right: 2.0%; /*20/960*/}

Richard

I'm glad you got the image shrinkage issue sorted out!


You'll find many resources on the web if you Google (e.g.) "Responsive design" or similar variations.
One book that I like in particular is by Ethan Marcotte: "Responsive Web Design". It's available here as E-book (US$9) or in paperback: http://www.abookapart.com/products/resp … web-design
Ethan Marcotte was one of the originators of the concept of responsive web design.
One of the chapters ("Flexible Images") is available to read online from that link. You may want to take a look at that chapter to get an idea of the level of detail, writing style, etc. and see if you like it before you buy.
Have fun!

Don't set the footer width to 100%. Check this above in my previous post:

width: 58.333333%; /* 560/960 */

This is the width quoted in the original theme css.

Thanks Inger
Just to clarify, that footer css puts a footer, outlined, offset to the right and I did not like it.
Assume that as long as the footer is not 100% then the sizing issue might not be a problem??

Thanks

Richard

I tested it some days ago, and it worked fine with those 58 point something %. I'm not at home now, where I still have the test files, but I'll check atain in a couple of hours.