[css-d] responsive css
I'm having a couple of issues with my attempt at adding responsive aspects to
an existing design. Files at http://skunkworks.pixelalchemy.com/responsive/
1. How do I target both mobile and skinny browser windows: I've tried:
@media screen and (max-device-width: 480px) {
@media (max-width: 480px) {
The first works for a mobile device, and the second OMM when I'm developing,
but neither works for both.
2. Why is everything so small on a mobile device (iOS specifically)?
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] responsive css
On Mon, May 20, 2013 at 10:30 AM, Dave Solko d...@pixelalchemy.com wrote:
I'm having a couple of issues with my attempt at adding responsive aspects to
an existing design. Files at http://skunkworks.pixelalchemy.com/responsive/
1. How do I target both mobile and skinny browser windows: I've tried:
@media screen and (max-device-width: 480px) {
@media (max-width: 480px) {
The first works for a mobile device, and the second OMM when I'm developing,
but neither works for both.
2. Why is everything so small on a mobile device (iOS specifically)?
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
I generally use @media only screen and (min-width: [breakpoint]){}
with a mobile-first layout. As far as size go, it may be the 13px font
size on the body.
--
Tom Livingston | Senior Front-End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | mlinc.com
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
[css-d] Responsive Design resources
I'm a retired and slightly obsolete programmer who wants to jump back into the game. There seems to be a lot of work remodeling websites so they work well with cell phones, and also a lot of work moving toward cloud-based everything. I've got a good handle on the cloud based stuff. But I'm clueless about cell phone CSS strategies. I learn quickly. *What are some good online responsive design resources? * (my first attempts to find good resources yielded poorly-written jargon) -- /* Colin (Sandy) Pittendrigh --oO0 */ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive Design resources
I recommend Mobile First and Responsive Web Design from abookapart.com as well as peeking under the hood at sites listed at mediaqueri.es HTH — Sent from Mailbox for iPhone On Mon, May 20, 2013 at 11:46 AM, Colin (Sandy) Pittendrigh sandy.pittendr...@gmail.com wrote: I'm a retired and slightly obsolete programmer who wants to jump back into the game. There seems to be a lot of work remodeling websites so they work well with cell phones, and also a lot of work moving toward cloud-based everything. I've got a good handle on the cloud based stuff. But I'm clueless about cell phone CSS strategies. I learn quickly. *What are some good online responsive design resources? * (my first attempts to find good resources yielded poorly-written jargon) -- /* Colin (Sandy) Pittendrigh --oO0 */ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/ __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] Responsive Design resources
Sorry to Tom for first sending this to him, not the list. On May 20, 2013, at 10:52 AM, Tom Livingston tom...@gmail.com wrote: I recommend Mobile First and Responsive Web Design from abookapart.com I'd recommend a book with the same title but with Jump Start at the beginning: Jump Start Responsive Web Design -- thru Sitepoint, Amazon, etc. But since I'm a designer, your taste as a programmer may be different. lynda.com has several courses on responsive design. You can join for $25/month and stay as long as you like (can even go on and off the membership at will; they don't mind). Chuck M __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
Re: [css-d] responsive css
To solve the second point you raise about everything being small, the viewport
meta tag would adjust how your design appears on mobile devices.
There's numerous good resources available but as a starter a suggestion would
be
meta name=viewport content=width=device-width, initial-scale=1.0
Perhaps try the second media query again with the viewport added, hopefully it
will solve the skinny browser and mobile view.
Regards
Dez
_
On 20 May 2013, at 15:30, Dave Solko d...@pixelalchemy.com wrote:
I'm having a couple of issues with my attempt at adding responsive aspects to
an existing design. Files at http://skunkworks.pixelalchemy.com/responsive/
1. How do I target both mobile and skinny browser windows: I've tried:
@media screen and (max-device-width: 480px) {
@media (max-width: 480px) {
The first works for a mobile device, and the second OMM when I'm developing,
but neither works for both.
2. Why is everything so small on a mobile device (iOS specifically)?
Dave Solko
Pixel Alchemy
d...@pixelalchemy.com
513.300.2165
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
__
css-discuss [css-d@lists.css-discuss.org]
http://www.css-discuss.org/mailman/listinfo/css-d
List wiki/FAQ -- http://css-discuss.incutio.com/
List policies -- http://css-discuss.org/policies.html
Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
