Re: [css-d] media queries following prior rules

2016-07-12 Thread Philippe Wittenbergh
> On Jul 12, 2016, at 12:28 PM, Tom Livingston wrote: > > On Monday, July 11, 2016, Philippe Wittenbergh wrote: > >> How did Peter Gabriel creep into the conversation? > > > He sang the song "Sledgehammer" ;) Ah. Thanks. I learned something today! Last

Re: [css-d] media queries following prior rules

2016-07-11 Thread Tom Livingston
On Monday, July 11, 2016, Philippe Wittenbergh wrote: > > > On Jul 12, 2016, at 9:44 AM, Tom Livingston > wrote: > > > > While Philippe may well me right about Peter Gabriel singing the theme > song > > for this technique, I have used this method

Re: [css-d] media queries following prior rules

2016-07-11 Thread Philippe Wittenbergh
> On Jul 12, 2016, at 9:44 AM, Tom Livingston wrote: > > While Philippe may well me right about Peter Gabriel singing the theme song > for this technique, I have used this method frequently, with a slight > difference. I use: > > html{box-sizing: border-box;} > *, *:before,

Re: [css-d] media queries following prior rules

2016-07-11 Thread Tom Livingston
On Mon, Jul 11, 2016 at 7:58 PM, Philippe Wittenbergh wrote: > > > On Jul 12, 2016, at 1:13 AM, John J wrote: > > > > At the link below, the name, email, subject fields don't appear to be > > obeying rules governing width as in the previous media breaks.. > > >

Re: [css-d] media queries following prior rules

2016-07-11 Thread Philippe Wittenbergh
> On Jul 12, 2016, at 1:13 AM, John J wrote: > > At the link below, the name, email, subject fields don't appear to be > obeying rules governing width as in the previous media breaks.. > > at 360 and 320, those fields exceed the width of their parent, rather than >

Re: [css-d] media queries following prior rules

2016-07-11 Thread Peter H.
> On 11 Jul 2016, at 18:13, John J wrote: > > At the link below, the name, email, subject fields don't appear to be > obeying rules governing width as in the previous media breaks.. > > at 360 and 320, those fields exceed the width of their parent, rather than > respecting

[css-d] media queries following prior rules

2016-07-11 Thread John J
At the link below, the name, email, subject fields don't appear to be obeying rules governing width as in the previous media breaks.. at 360 and 320, those fields exceed the width of their parent, rather than respecting padding set prior..maybe I'm missing something..if I have my rules set up

Re: [css-d] Media queries

2016-06-22 Thread Tim Arnold
On Wed, Jun 22, 2016 at 11:06 AM Tom Livingston wrote: > List, > > Do you use separate css (or LESS or Sass) files for each breakpoint, or > MQ's blended in with the rest? Why? > > Up to this point, I have always used separate scss files for each > breakpoint and used Sass

[css-d] Media queries

2016-06-22 Thread Tom Livingston
List, Do you use separate css (or LESS or Sass) files for each breakpoint, or MQ's blended in with the rest? Why? Up to this point, I have always used separate scss files for each breakpoint and used Sass imports to make them into a single css file. With changes made to our browser support here

Re: [css-d] @media queries

2016-01-28 Thread Tom Livingston
On Thursday, January 28, 2016, Reese wrote: > I had to do something with media queries today. It has been a while > and I haven't done that much with them prior, it ended up being more > difficult than I think it should have been. > > Can anyone recommend a good media

[css-d] @media queries

2016-01-28 Thread Reese
I had to do something with media queries today. It has been a while and I haven't done that much with them prior, it ended up being more difficult than I think it should have been. Can anyone recommend a good media queries tutorial/refresher that is both online and free? Reese

Re: [css-d] Media Queries break points/ reducing CSS bloat?

2015-01-27 Thread Tom Livingston
On Tue Jan 27 2015 at 11:39:34 AM Nancy Johnson njohnso...@gmail.com wrote: two questions: 1. What are the best practices 2015 for media query breakpoints? 2. What are best practices in reducing CSS bloat? Thank you Nancy Johnson Ni Nancy, I don't know about '2015', but I'd say best

[css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
I have the following Media Queries. When the screen size is 320px the background color for the #menupanel should change to red that is not happening when it is larger then 320px it should remain gray although neither is happening ! body {margin:0;padding:0;background-color:blue;} /*

Re: [css-d] Media Queries not working

2014-11-20 Thread Tom Livingston
Try: @media only screen and (min-width : 320px) { #menupanel {background-color:red;height:400px;width:320px;border:2px;} } @media only screen and (min-width : 600px) { #menupanel {background-color:gray;height:400px;width:500px;} } On Thu, Nov 20, 2014 at 8:37 PM Crest Christopher

Re: [css-d] Media Queries not working

2014-11-20 Thread Chris Rockwell
Using a media query doesn't contribute to specificity, so your code would work if you moved the declaration that sets the color to gray above the media query. If you wanted to get all mobile first on it, you could do: #menupanel { background-color: red } @media (min-width: 321px) { #menupanel {

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
Chris code works better, although there remains a horizontal scroll bar, maybe that is due to the fact I'm narrowing the browser window too much, a little beyond the min-320px. Tom your code when I scale the browser window there is a jump or gap. What I mean is, the media querie is kicking

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
I love media queries, I use to think I had to make everything width 100%, media queries are almost equal to scaling a graphic in Ps, minus the image interpolation issues etc. Christopher Tom Livingston mailto:tom...@gmail.com Thursday, November 20, 2014 8:46 PM Try: @media only screen and

Re: [css-d] Media Queries not working

2014-11-20 Thread Russ McMullin
I suspect the scroll bar is from telling #menupanel to be 320px, plus a border of 2px, which would make it 324px wide, unless you are using box-sizing:border-box;. That is where I would start looking. Russ On Nov 20, 2014, at 9:13 PM, Crest Christopher crestchristop...@gmail.com wrote:

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
Tom, as I shrink the viewport before I reach 320px the box is red, shouldn't it wait until the viewport is at 320px ? Christopher Tom Livingston mailto:tom...@gmail.com Thursday, November 20, 2014 9:39 PM Look at this: http://tomliv.com/css-d/mq/ I am using min-width. So the viewport needs

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
Why is it adding 4px for left and right ? I'm reading up on box-sizing, I don't see the benefit ? Christopher Russ McMullin mailto:r...@catjuggling.com Thursday, November 20, 2014 9:21 PM I suspect the scroll bar is from telling #menupanel to be 320px, plus a border of 2px, which would make

Re: [css-d] Media Queries not working

2014-11-20 Thread Tom Livingston
border of 2px, which is on all 4 sides, adds 2px on the left and 2px on the right. 4px. On Thu Nov 20 2014 at 9:47:11 PM Crest Christopher crestchristop...@gmail.com wrote: Why is it adding 4px for left and right ? I'm reading up on box-sizing, I don't see the benefit ? Christopher Russ

Re: [css-d] Media Queries not working

2014-11-20 Thread Tom Livingston
On Thu Nov 20 2014 at 9:47:11 PM Crest Christopher crestchristop...@gmail.com wrote: Why is it adding 4px for left and right ? I'm reading up on box-sizing, I don't see the benefit ? Without setting box-xizing to border-box, the box model is additive (except in older IE, ironically) which

Re: [css-d] Media Queries not working

2014-11-20 Thread Tom Livingston
On Thu Nov 20 2014 at 9:54:00 PM Tom Livingston tom...@gmail.com wrote: On Thu Nov 20 2014 at 9:47:11 PM Crest Christopher crestchristop...@gmail.com wrote: Why is it adding 4px for left and right ? I'm reading up on box-sizing, I don't see the benefit ? Without setting box-xizing to

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
I see, you prefer min-width ? Christopher Tom Livingston mailto:tom...@gmail.com Thursday, November 20, 2014 9:46 PM No. As I stated in my reply. I'm using MIN-WIDTH media queries. They are active when the viewport is AT LEAST as wide as the dimension stated and remain in effect until - in

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
Interesting border-box, smarter too, took them long enough I suppose I should just use box-sizing instead ! Tom Livingston mailto:tom...@gmail.com Thursday, November 20, 2014 9:54 PM crestchristop...@gmail.com mailto:crestchristop...@gmail.com Why is it adding 4px for left and right ?

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
I'll change my max-width to min-width. When you say percentages for widths, you prefer to instead of using pixels for a box, use percentages ? Christopher Tom Livingston mailto:tom...@gmail.com Thursday, November 20, 2014 10:24 PM crestchristop...@gmail.com mailto:crestchristop...@gmail.com

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
There is a way of thinking with this min-width because everything after changing from max-width has reversed. Instead when the view-port is larger the block should become larger instead it's shrinking for mobile, I'm doing something wrong ! Christopher Tom Livingston

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
You set a max-width percentage width, thanks for the tip ! Christopher Tom Livingston mailto:tom...@gmail.com Thursday, November 20, 2014 10:39 PM Yes, for major structure elements. You can set a max-width if you desire so your page (or page elements) will not get too wide. Like: wrapper{

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
I'm styling for mobile and desktop. My priority is mobile ! When you say your styles need to be in the right order, you mean put the Mobile MQ above the desktop MQ, correct ? Christopher Tom Livingston mailto:tom...@gmail.com Thursday, November 20, 2014 10:47 PM Just changing your MQs isn't

Re: [css-d] Media Queries not working

2014-11-20 Thread Crest Christopher
That I am doing. I want to get a foundation for how larger screens will handle which is easier when you go larger. Christopher Tom Livingston mailto:tom...@gmail.com Thursday, November 20, 2014 10:54 PM basically. You would style for 'phone' size first, then add and change for larger

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Tim Dawson
Thanks to all those who have replied. Changing the media query limits to ems at the rate of 1em = 16 pixels worked well. Likewise for div widths and anywhere with default text size. But widths, margins (in fact any dimension you care to name) went haywire in headings h? with a different

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Tim Climis
On Saturday, April 19, 2014 01:27:12 PM Tim Dawson wrote: I'm tempted to leave margins, padding etc. in headings as pixels and just change them in the media query if they become unworkable. Particularly when it comes to small spaces (1-10 pixels, say) it seems very fiddly to deal with

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Tedd Sperling
On Apr 19, 2014, at 8:27 AM, Tim Dawson t...@ramasaig.com wrote: Changing the media query limits to ems at the rate of 1em = 16 pixels worked well. Likewise for div widths and anywhere with default text size. But widths, margins (in fact any dimension you care to name) went haywire in

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread MiB
apr 19 2014 16:00 Tedd Sperling t...@sperling.com: 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. Here's my write-up on it: The downside is unacceptable to me, as ems for image width doesn’t respect zoom only text”. I’d use percentages for width

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Tim Dawson
On 19/04/2014 15:00, Tedd Sperling wrote: I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. Given that my original margin/padding around an h1 with font-size 250% was in pixels, when I converted at 1 em = 16

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Tedd Sperling
On Apr 19, 2014, at 4:19 PM, Tim Dawson t...@ramasaig.com wrote: On 19/04/2014 15:00, Tedd Sperling wrote: I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. Given that my original margin/padding around an

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Tedd Sperling
Hi gang: Is anyone else receiving inappropriate pics with this subject line? Cheers, tedd ___ tedd sperling t...@sperling.com __ css-discuss [css-d@lists.css-discuss.org]

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Georg
Den 19.04.2014 16:00, Tedd Sperling wrote: 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. I find there is something wrong/missing in that statement, as images scale with browser-zoom no matter how we define sizes. Of course no harm done in setting

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Tim Dawson
On 19/04/2014 22:56, Tedd Sperling wrote: On Apr 19, 2014, at 4:19 PM, Tim Dawson t...@ramasaig.com wrote: On 19/04/2014 15:00, Tedd Sperling wrote: I don't understand your statement Obviously the em value has to be reduced as the font-size increases, to get the same pixel equivalent. Given

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Tedd Sperling
On Apr 19, 2014, at 8:11 PM, Tim Dawson t...@ramasaig.com wrote: On 19/04/2014 15:00, Tedd Sperling wrote: I just set my h? to whatever size I want knowing that 1em is equal (in most cases) to 16 pixels. No need for percentages in setting font sizes. If you set your font-sizes in ems then I

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Tedd Sperling
On Apr 19, 2014, at 7:00 PM, Georg ge...@gunlaug.com wrote: Den 19.04.2014 16:00, Tedd Sperling wrote: 4. Lastly, use ems for images as well. That way your entire site scales well with zooms. I find there is something wrong/missing in that statement, as images scale with browser-zoom no

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-19 Thread Georg
Den 20.04.2014 04:14, Tedd Sperling wrote: The thing that was missing is I should have added that *all* measurements are done in ems and thus no scaling difference between text and images thereby holding the layout static. Which is what I object to. Text-only zoom should not be made to

[css-d] Media Queries: How many pixels make an em ?

2014-04-18 Thread Tim Dawson
I've been following another thread (Phone breaks), and I can see the advantage of using 'ems' rather than pixels for media queries. So if I'm using 'px' now but would like to change to 'em', how do I calculate how many 'em' to allow for my 960px starting point ? To add to my confusion my

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-18 Thread Felix Miata
On 2014-04-18 17:53 (GMT+0100) Tim Dawson composed: I've been following another thread (Phone breaks), and I can see the advantage of using 'ems' rather than pixels for media queries. So if I'm using 'px' now but would like to change to 'em', how do I calculate how many 'em' to allow

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-18 Thread Felix Miata
On 2014-04-18 17:53 (GMT+0100) Tim Dawson composed: I've been following another thread (Phone breaks), and I can see the advantage of using 'ems' rather than pixels for media queries. So if I'm using 'px' now but would like to change to 'em', how do I calculate how many 'em' to allow

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-18 Thread Freelance Traveller
On Fri, 18 Apr 2014 17:53:37 +0100, Tim Dawson t...@ramasaig.com wrote: I've been following another thread (Phone breaks), and I can see the advantage of using 'ems' rather than pixels for media queries. So if I'm using 'px' now but would like to change to 'em', how do I calculate how

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-18 Thread Tom Livingston
On Fri, Apr 18, 2014 at 4:03 PM, Freelance Traveller edi...@freelancetraveller.com wrote: On Fri, 18 Apr 2014 17:53:37 +0100, Tim Dawson t...@ramasaig.com wrote: I've been following another thread (Phone breaks), and I can see the advantage of using 'ems' rather than pixels for media

Re: [css-d] Media Queries: How many pixels make an em ?

2014-04-18 Thread David Hucklesby
On 4/18/14, 2:10 PM, Tom Livingston wrote: On Fri, Apr 18, 2014 at 4:03 PM, Freelance Traveller edi...@freelancetraveller.com wrote: On Fri, 18 Apr 2014 17:53:37 +0100, Tim Dawson t...@ramasaig.com wrote: I've been following another thread (Phone breaks), and I can see the advantage of

[css-d] media queries

2014-02-24 Thread Nancy Johnson
Is there a standard method to use media queries? I took the W3C mobile course about 3 years ago and since then there are many more devices out there each with different size and/or retinal display. Thanks, Nancy Johnson __

Re: [css-d] media queries

2014-02-24 Thread Chris Rockwell
By standard method are you just referring to standard widths to set your media queries. There used to be (from 2010: http://css-tricks.com/snippets/css/media-queries-for-standard-devices/), and you can still find staring point queries, but it really depends on your site. Say, for example, you're

Re: [css-d] media queries

2014-02-24 Thread Tom Livingston
Sent from my iPhone On Feb 24, 2014, at 2:37 PM, Nancy Johnson njohnso...@gmail.com wrote: Is there a standard method to use media queries? I took the W3C mobile course about 3 years ago and since then there are many more devices out there each with different size and/or retinal

Re: [css-d] media queries

2014-02-24 Thread Rod Castello
Just jumping in here with an additional question that might help Nancy as well. I've been converting the splash pages where I work to be responsive, just single pages. So far so good, but the idea of mobile first sounds attractive. Can anyone recommend some good links for tutorial, articles, etc.

Re: [css-d] media queries

2014-02-24 Thread Chris Rockwell
This just came up in my Twitter feed, and looks like it may shine some light on both questions: http://www.adamkaplan.me/grid/. I just scanned down the page but it seems pretty complete for getting the basics of mobile-first/responsive, including some css examples. On Mon, Feb 24, 2014 at 4:14

Re: [css-d] media queries

2014-02-24 Thread Rod Castello
Chris, That looks good. Thanks, Good luck Nancy, Rod Castello On Mon, Feb 24, 2014 at 2:04 PM, Chris Rockwell ch...@chrisrockwell.comwrote: This just came up in my Twitter feed, and looks like it may shine some light on both questions: http://www.adamkaplan.me/grid/. I just scanned down

Re: [css-d] media queries and background images

2014-01-03 Thread Bob Passaro
Thanks for your thoughts, Tom. I'm thinking there's no good solution here. I'll probably just make a separate stylesheet for IE8 and below without the mobile styles and media queries. Call that from the head. Then in my main css file call images for the most part from within media queries. I

Re: [css-d] media queries and background images

2014-01-03 Thread Tom Livingston
On Fri, Jan 3, 2014 at 9:52 AM, Bob Passaro bob.pass...@gmail.com wrote: Thanks for your thoughts, Tom. I'm thinking there's no good solution here. I'll probably just make a separate stylesheet for IE8 and below without the mobile styles and media queries. Call that from the head. Then in my

[css-d] media queries and background images

2014-01-02 Thread Bob Passaro
So let's say you had something like this in the main, general part of your stylesheet: #logo { background: url(images/logo.png) no-repeat 0 0; } And down in your media queries: @media screen and (max-width: 520px) { #logo { background: url(images/logo-small.png) no-repeat 0

Re: [css-d] media queries and background images

2014-01-02 Thread Tom Livingston
On Thu, Jan 2, 2014 at 12:50 PM, Bob Passaro bob.pass...@gmail.com wrote: So let's say you had something like this in the main, general part of your stylesheet: #logo { background: url(images/logo.png) no-repeat 0 0; } And down in your media queries: @media screen and (max-width:

Re: [css-d] media queries and background images

2014-01-02 Thread Tom Livingston
After reading through your linked article, it would appear that it doesn't matter whether you use mobile-first or not. Am I correct listers? On Thu, Jan 2, 2014 at 1:00 PM, Tom Livingston tom...@gmail.com wrote: On Thu, Jan 2, 2014 at 12:50 PM, Bob Passaro bob.pass...@gmail.com wrote: So let's

Re: [css-d] media queries and background images

2014-01-02 Thread Tom Livingston
A little Googling yielded this -- interesting: http://timkadlec.com/2012/04/media-query-asset-downloading-results/ This post says it all depends on the browser -- and that what I have above would work as I want on iOS but Android would download both images. Putting both rules inside media

Re: [css-d] media queries issues

2013-08-30 Thread PL
John, I think you need another media query in your css style sheet, you only have two, you probably need three: desktop, tablet and mobile. Using firebug, select your wrapper div and view Layout. Drag your screen slowly to the left to find the first breakpoint where your styling for desktop

Re: [css-d] media queries issues

2013-08-30 Thread John A. Johnson
On Aug 30, 2013, at 1:22 AM, PL polockh...@sprintmail.com wrote: John, I think you need another media query in your css style sheet, you only have two, you probably need three: desktop, tablet and mobile. Thank you, Patrice; In working with my nav menu, one issue I'm having is getting the

[css-d] media queries issues

2013-08-29 Thread John A. Johnson
I am trying to get solid on basic media queries with the simple site, link below. When narrow the viewport to tablet which I have set at max-width:768px, the desktop styles vanish, but tablet styles don't take their place. I've been wracking my brain over this and I am not seeing the problem.

Re: [css-d] media queries issues

2013-08-29 Thread Tom Livingston
Can't look right now but are you adding to or changing desktop styles or replacing them. Are you working desktop down?  — Sent from Mailbox for iPhone On Thu, Aug 29, 2013 at 6:20 PM, John A. Johnson j...@coffeeonmars.com wrote: I am trying to get solid on basic media queries with the

Re: [css-d] media queries issues

2013-08-29 Thread John A. Johnson
I am working desktop down (I know about mobile first) and I am copying the desktop css into tablet which is my first break so far, and modifying as needed to suit tablet (max 768px) Thanks! John On Aug 29, 2013, at 3:28 PM, Tom Livingston tom...@gmail.com wrote: Can't look right now but

Re: [css-d] media queries issues

2013-08-29 Thread Tom Livingston
Try using min-width instead. On Thu, Aug 29, 2013 at 6:30 PM, John A. Johnson j...@coffeeonmars.com wrote: I am working desktop down (I know about mobile first) and I am copying the desktop css into tablet which is my first break so far, and modifying as needed to suit tablet (max 768px)

Re: [css-d] media queries issues

2013-08-29 Thread John A. Johnson
On Aug 29, 2013, at 3:41 PM, Tom Livingston tom...@gmail.com wrote: Try using min-width instead. that fixes it to tablet size and no larger! I do see ppl using various combos of min- and max-width…must be something else weird in my code. J

Re: [css-d] media queries issues

2013-08-29 Thread John A. Johnson
OK..I may have solved at least part of it… for my desktop query, I either deleted or failed to type the closing } for the media query! watch this space… John __ css-discuss [css-d@lists.css-discuss.org]

Re: [css-d] media queries issues

2013-08-29 Thread Tom Livingston
Might be simpler to not have an MQ around your desktop since in this case it's your base. And just make adjustments in the other MQs. No need to repeat everything. — Sent from Mailbox for iPhone On Thu, Aug 29, 2013 at 7:01 PM, John A. Johnson j...@coffeeonmars.com wrote: OK..I may have

Re: [css-d] media queries issues

2013-08-29 Thread John A. Johnson
On Aug 29, 2013, at 4:06 PM, Tom Livingston tom...@gmail.com wrote: Might be simpler to not have an MQ around your desktop since in this case it's your base. And just make adjustments in the other MQs. No need to repeat everything. well that is a very good idea, Tom. Right now, my Desktop

Re: [css-d] media queries issues

2013-08-29 Thread Tom Livingston
If you use the right MQs, you can still do that. Same concept, different widths and adjustments. — Sent from Mailbox for iPhone On Thu, Aug 29, 2013 at 7:10 PM, John A. Johnson j...@coffeeonmars.com wrote: On Aug 29, 2013, at 4:06 PM, Tom Livingston tom...@gmail.com wrote: Might be

Re: [css-d] media queries issues

2013-08-29 Thread John A. Johnson
On Aug 29, 2013, at 4:11 PM, Tom Livingston tom...@gmail.com wrote: If you use the right MQs, you can still do that. Same concept, different widths and adjustments. OK, wait..the lightbulb just went off..you're saying, whatever the starting point is, requires no MQ; only the breaks do, and

Re: [css-d] media queries issues

2013-08-29 Thread Tom Livingston
I would not be able to sleep tonight if I didn't bring up 'mobile first' again. It's been my experience with both methods, that it's easier to go from mobile up and usually requires less CSS. I've had some break point sheets with only a few lines of CSS. I usually only use min-width MQs. Just a

Re: [css-d] media queries issues

2013-08-29 Thread John A. Johnson
On Aug 29, 2013, at 5:03 PM, Tom Livingston tom...@gmail.com wrote: I would not be able to sleep tonight if I didn't bring up 'mobile first' again. It's been my experience with both methods, that it's easier to go from mobile up and usually requires less CSS. I've had some break point sheets

Re: [css-d] media queries issues

2013-08-29 Thread Chris Rockwell
I'll second the mobile first. I'm currently going through a site that was designed for desktop and making it narrow screen friendly; after trying to work backwards I just broke the page down into modules and am doing each one narrow - wide; so much easier, and fewer headaches. On Thu, Aug 29,

[css-d] media queries chaos for smart phones

2013-06-14 Thread weblist99
I'm running into a chaos with responsive design targeting many devices. The main issue is with different resolutions for smart phone. A year ago below sizes works fine. • 320 px Mobile portrait • 480 px Mobile landscape • 600 px Small tablet • 768 px Tablet portrait • 1024 px

Re: [css-d] media queries chaos for smart phones

2013-06-14 Thread Philippe Wittenbergh
Le 15 juin 2013 à 10:14, weblist99 weblis...@gmail.com a écrit : I'm running into a chaos with responsive design targeting many devices. The main issue is with different resolutions for smart phone. ….. Instead of thinking to target particular device sizes (impossible in an ever changing

Re: [css-d] media queries chaos for smart phones

2013-06-14 Thread Al Sparber
On 6/14/2013 9:14 PM, weblist99 wrote: I'm running into a chaos with responsive design targeting many devices. The main issue is with different resolutions for smart phone. A year ago below sizes works fine. • 320 px Mobile portrait • 480 px Mobile landscape • 600 px Small

[css-d] Media Queries

2013-02-22 Thread Tom Livingston
List, I have been developing with media queries on link elements like such: link rel=stylesheet media=screen href=css/style.css?v=1 link rel=stylesheet media=only screen and (min-width: 600px) href=css/600.css?v=1 link rel=stylesheet media=only screen and (min-width: 768px) href=css/768.css?v=1

Re: [css-d] Media Queries

2013-02-22 Thread Philippe Wittenbergh
Le 23 févr. 2013 à 06:47, Tom Livingston tom...@gmail.com a écrit : I have been reading more recently that some are tending to abandon the above for media queries within a single sheet. My question is how does one handle old IE using the single sheet method? I don't really like polyfills and

Re: [css-d] Media queries and em's

2013-01-17 Thread Kuzeko Web Design - Matteo Lissandrini
Related to the topic http://css-tricks.com/zooming-squishes/ -- Kuzeko On 13 January 2013 18:35, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Hi all, I would like to work on my new project building Responsive layouts making use of flexible em-based

Re: [css-d] Media queries and em's

2013-01-16 Thread Tedd Sperling
On Jan 14, 2013, at 5:52 PM, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Tedd Sperling wrote: Also, here's a complete site: http://sperling.com/clients/beckyscan/index.php Try changing your zoom levels in your Browser to see the effect. You can't do that with pixels. Edit /

Re: [css-d] Media queries and em's

2013-01-16 Thread Tedd Sperling
On Jan 14, 2013, at 5:00 PM, Felix Miata mrma...@earthlink.net wrote: On 2013-01-14 15:55 (GMT-0500) Eric composed: html {font-size: 16px;} Then all REMs on the page will be 16px no matter what eles. Not quite. Notwithstanding that styling text in px ignores the wide variation in

Re: [css-d] Media queries and em's

2013-01-14 Thread Kuzeko Web Design - Matteo Lissandrini
Yes, you are right I expressed it the wrong way. So, do you have any particular suggestion? -- Kuzeko On 13 January 2013 21:37, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Kuzeko Web Design - Matteo Lissandrini wrote: Yes, Christian is right, exactly from this

Re: [css-d] Media queries and em's

2013-01-14 Thread Philip TAYLOR
Kuzeko Web Design - Matteo Lissandrini wrote: Yes, you are right I expressed it the wrong way. So, do you have any particular suggestion? Well, no : not more than I have already said. You might like to look at David Laakso's web site, into which he has been putting considerable effort to

Re: [css-d] Media queries and em's

2013-01-14 Thread Kuzeko Web Design - Matteo Lissandrini
I'm sorry Philip, but I may have missed something... Why recommending this particular website among the thousands available (e.g. http://MediaQueri.es )? Additionally that one does not use the technique I'm researching. On 14 January 2013 11:23, Philip TAYLOR p.tay...@rhul.ac.uk wrote:

Re: [css-d] Media queries and em's

2013-01-14 Thread Philip TAYLOR
Kuzeko Web Design - Matteo Lissandrini wrote: I'm sorry Philip, but I may have missed something... Why recommending this particular website among the thousands available (e.g. http://MediaQueri.es )? Simply because I had occasion to visit it recently and was pleased to see how well it

Re: [css-d] Media queries and em's

2013-01-14 Thread Kuzeko Web Design - Matteo Lissandrini
Apologize. I'm sorry if I sounded rude or pretentious, I though that I was missing something about that site. That's it. -- Kuzeko On 14 January 2013 11:56, Philip TAYLOR p.tay...@rhul.ac.uk wrote: Kuzeko Web Design - Matteo Lissandrini wrote: I'm sorry Philip, but I

Re: [css-d] Media queries and em's (Philip TAYLOR)

2013-01-14 Thread Eric
I doubt that. em is a unit relative to the current font size. http://en.wikipedia.org/wiki/Em_%28typography%29 http://en.wikipedia.org/wiki/Em_%28typography%29 says: Thus, em generally means the point size of the font in question. So if for one particular font size 1em is 16 pixels, for a font

Re: [css-d] Media queries and em's

2013-01-14 Thread Felix Miata
On 2013-01-14 15:55 (GMT-0500) Eric composed: html {font-size: 16px;} Then all REMs on the page will be 16px no matter what eles. Not quite. Notwithstanding that styling text in px ignores the wide variation in effective pixel density and rudely disregards the visitor's optimum text

Re: [css-d] Media queries and em's

2013-01-14 Thread Tedd Sperling
On Jan 13, 2013, at 2:50 PM, John Snippe j...@snippe.ca wrote: On 2013-01-13, at 2:09 PM, Tedd Sperling wrote: Additionally, here is something that helped me -- when converting from pixels to em simply divide by 16. For example, an image that is 16 pixels wide is also 1 em wide. If I

Re: [css-d] Media queries and em's

2013-01-14 Thread David Laakso
On Sun, Jan 13, 2013 at 12:35 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: Hi all, I would like to work on my new project building Responsive layouts making use of flexible em-based media queries instead of pixel based. Did you tried this approach, is there anything I

[css-d] Media queries and em's

2013-01-13 Thread Kuzeko Web Design - Matteo Lissandrini
Hi all, I would like to work on my new project building Responsive layouts making use of flexible em-based media queries instead of pixel based. The more detailed and up-to-date resources I've found are here http://filamentgroup.com/lab/how_we_learned_to_leave_body_font_size_alone/

Re: [css-d] Media queries and em's

2013-01-13 Thread Tedd Sperling
On Jan 13, 2013, at 12:35 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: I would like to work on my new project building Responsive layouts making use of flexible em-based media queries instead of pixel based. -snip- So, is there any new findings on the subject, or is

Re: [css-d] Media queries and em's

2013-01-13 Thread Christian Kirchhoff privat
Am 13.01.2013 20:09, schrieb Tedd Sperling: On Jan 13, 2013, at 12:35 PM, Kuzeko Web Design - Matteo Lissandrini w...@kuzeko.com wrote: I would like to work on my new project building Responsive layouts making use of flexible em-based media queries instead of pixel based. -snip- So, is

Re: [css-d] Media queries and em's

2013-01-13 Thread Kuzeko Web Design - Matteo Lissandrini
Yes, Christian is right, exactly from this observation come my question. How to handle this fact? Is 16px enough widespread to let us hope the design will be coherent through different systems and devices? Did you had some workaround or trick to enact? -- Kuzeko On 13

Re: [css-d] Media queries and em's

2013-01-13 Thread Philip TAYLOR
Kuzeko Web Design - Matteo Lissandrini wrote: Yes, Christian is right, exactly from this observation come my question. How to handle this fact? Is 16px enough widespread to let us hope the design will be coherent through different systems and devices? Did you had some workaround or trick

[css-d] [media queries] support for *-device-pixel-ratio

2011-11-29 Thread Joergen W. Lang
Hello everybody, looking into the possibilities of CSS media queries I found several sources that recommend using /min-device-pixel-ratio/ (and friends) to check for high-resolution screens. Apparently this is implemented in the form of several prefixed versions in webkit, Opera and Gecko.

Re: [css-d] [media queries] support for *-device-pixel-ratio

2011-11-29 Thread David Laakso
On 11/29/11 8:58 AM, Joergen W. Lang wrote: looking into the possibilities of CSS media queries I found several sources that recommend using /min-device-pixel-ratio/ (and friends) to check for high-resolution screens. Apparently this is implemented in the form of several prefixed versions in

Re: [css-d] [media queries] support for *-device-pixel-ratio

2011-11-29 Thread Joergen W. Lang
Am 29.11.11 17:11, schrieb David Laakso: On 11/29/11 8:58 AM, Joergen W. Lang wrote: looking into the possibilities of CSS media queries I found several sources that recommend using /min-device-pixel-ratio/ (and friends) to check for high-resolution screens. Apparently this is implemented

  1   2   >