In order to create responsive square de height of the div’s need to be the same as the width. You can’t do this within the standard Freeway given options, so there’s a workaround for this (CSS3 only).
In a flexible width layout, just apply the proper % for width (12,5% in this 8-square example). Because squares tend to have the same height and width, you need to determine the height as well, but Freeway will use the percentage of the page-height, which -of course- is different. CSS3 However enables you to use the viewport as source (I’m currently using just two of them):
Well, there you have it. But Freeway’s interface only supports %, px and em … you will have to apply those values using the extended feature. So having 12,5% applied for div width, you will need to open up the extended feature (Cmd+X) and select the DIV style tab. Now add a new attribute: ‘height’ for name and for value enter ‘12,5vw !important’ (without the quotes). Now you’ve just applied 12,5% of the viewport width to the DIV’s height. The !important part will overrule other height-attributes applied by Freeway. That’s all.
Because padding is defined as a percentage of the parent width (in this case the page itself) we can use it to force the height of the object from 0px to match the width of the item. http://www.w3.org/TR/CSS2/box.html#padding-properties
Strictly we’re not setting the height but the padding of the item but (certainly in this example) the effect should be the same plus the bonus that my old dev machine which runs OS X 10.6.8 can see the effect.
Regards,
Tim.
Tnx Ernie, nice to be able to give something back any now and then
Anyways … I already was playing with vw/vh values, hoping to trigger Softpress to start supporting it (used the same url you mentioned btw). I came across a couple of sites using square div’s, and I was looking for a way to keep them square while narrowing the width. In retrospect it is so easy … as usual
Because padding is defined as a percentage of the parent width (in this case the page itself) we can use it to force the height of the object from 0px to match the width of the item. Box model
Strictly we’re not setting the height but the padding of the item but (certainly in this example) the effect should be the same plus the bonus that my old dev machine which runs OS X 10.6.8 can see the effect.
Regards,
Tim
For as long as you don’t place variable text in it, or flexible items …
This wasn’t intended as an example of a solution that would work across the board. Chrome supports viewpoint units so is applying both the padding and the height to the items. The belt and braces approach would be to apply Modernizer to the page and fall back to using padding if the browser didn’t support viewpoint units.
Regards,
Tim.
On 19 Nov 2014, at 22:58, DeltaDave wrote:
Interestingly they aren’t square for me in Chrome 37 !?
