Re: [directory-discuss] To narrow text

[Greg Rundlett (freephile)]

On Thu, Apr 16, 2015 at 1:18 PM, Joshua Gay <address@hidden> wrote:

On 04/16/2015 02:12 AM, David Englund/Hedlund wrote:
> Why is the text so narrow in say
> https://directory.fsf.org/wiki/GNU_IceCat ?

I think the description that was there was much longer than we needed. I
went ahead and provided a shorter description.

>
>
> Can you please make it wider?
>
>

Our CSS on the Directory is not very good. You can thank me for that :-)

To get our widths working properly we probably need to start using use
@media CSS element.

Hi All,

A change to use percentages and 'em's instead of hard pixel widths or font size would achieve a more fluid layout. Basically, always use em for font size. Only use px when you know the exact dimensions of something (like setting a negative margin for a graphic)

To really get what you want (a responsive layout that is designed to work well in print and a variety of devices), you are correct Josh that you should use the 'media' selector, in combination with 'media queries' [1]

CSS like the following would be good:

@media (min-width: 55em)

{

.main

{

float: left;

width: 65%;

margin-right: 5%;

margin-bottom: 1em;

}

.aside

{

float: left;

width: 30%;

margin-bottom: 1em;

}

}

Note how both columns are floated "left" which means that when your math or the browser isn't broken and the percentages <=100% they are side by side.  This side-by-side layout is only applied to devices that have a screen width of 880 pixels [2]

Example at http://maxdesign.com.au/jobs/css-layouts/12-example-layout-two-full/ and source at 

https://github.com/russmaxdesign/example-layout-two-full

[1] good list of various approaches at https://gist.github.com/dustinboston/3867516 

[2] 55em translates to 880px for the browser default font size of 16px.  https://css-tricks.com/css-font-size/

Greg Rundlett

http://eQuality-Tech.com

http://freephile.org