|
| From: | Greg Rundlett (freephile) |
| Subject: | Re: [directory-discuss] To narrow text |
| Date: | Wed, 11 May 2016 12:29:26 -0400 |
On Wed, 11 May 2016, David Hedlund wrote:
Can someone please modify the width?
Remove width:350px; from IceCat.html
Or change it to something like: max-width: 35em;
This issue is one year old now.
On 2015-04-16 20:16, Greg Rundlett (freephile) wrote:
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
--
Chris F.A. Johnson, <http://cfajohnson.com>
| [Prev in Thread] | Current Thread | [Next in Thread] |