Re: [css-d] Media Queries not working

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 Thursday, November 20, 2014 10:54 PM basically. You would style for 'phone' size first, then add and change for larger scree

Re: [css-d] Media Queries not working

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 Thursday, November 20, 2014 10:47 PM Just changing your MQs isn'

Re: [css-d] Media Queries not working

You set a max-width & percentage width, thanks for the tip ! Christopher Tom Livingston 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: wrappe

Re: [css-d] Media Queries not working

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

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 Thursday, November 20, 2014 10:24 PM crestchristop...@gmail.com

Re: [css-d] Media Queries not working

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

Re: [css-d] Media Queries not working

I see, you prefer min-width ? Christopher Tom Livingston 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 - i

Re: [css-d] Media Queries not working

On Thu Nov 20 2014 at 9:54:00 PM Tom Livingston 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 bor

Re: [css-d] Media Queries not working

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) w

Re: [css-d] Media Queries not working

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

Re: [css-d] Media Queries not working

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

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

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 wrote: > Chris code works better, altho

Re: [css-d] Media Queries not working

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 Thursday, November 20, 2014 8:46 PM Try: @media only screen and

Re: [css-d] Media Queries not working

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 in

Re: [css-d] Media Queries not working

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

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 < crestchristop.

[css-d] Media Queries not working

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;} /* Smart

Re: [css-d] CSS Particle Transition (Example of Effect)

It is neat :-) I'll move the question over to another list :) Christopher Tom Livingston Thursday, November 20, 2014 5:09 PM Tom Livingston Thursday, November 20, 2014 5:08 PM Please try the webdesign-l list. That example is done with script.

Re: [css-d] CSS Particle Transition (Example of Effect)

Neat though ;-) > On Thu Nov 20 2014 at 4:51:17 PM Crest Christopher < > crestchristop...@gmail.com> wrote: > >> I want to do an effect similar to this >> , except the breaks up >> into particles and transitions to another . I hope I'm understood ? >>

Re: [css-d] CSS Particle Transition (Example of Effect)

Please try the webdesign-l list. That example is done with script. This list is for CSS. http://www.webdesign-l.com/ On Thu Nov 20 2014 at 4:51:17 PM Crest Christopher < crestchristop...@gmail.com> wrote: > I want to do an effect similar to this > , e

[css-d] CSS Particle Transition (Example of Effect)

I want to do an effect similar to this , except the breaks up into particles and transitions to another . I hope I'm understood ? Christopher __ css-discuss [css-d@lists.css-discus