[Top][All Lists]

[Date Prev][Date Next][Thread Prev][Thread Next][Date Index][Thread Index]

Re: [directory-discuss] To narrow text

From: Greg Rundlett (freephile)
Subject: Re: [directory-discuss] To narrow text
Date: Thu, 16 Apr 2015 14:16:39 -0400

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
> ?

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)
float: left;
width: 65%;
margin-right: 5%;
margin-bottom: 1em;

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 and source at

[1] good list of various approaches at 
[2] 55em translates to 880px for the browser default font size of 16px.

Greg Rundlett

reply via email to

[Prev in Thread] Current Thread [Next in Thread]