Re: [css-d] Responsive Images

@media is what you recommend for changing images based on browser size, correct ? Christpher ? Crest Christopher Thursday, November 06, 2014 9:11 PM Basically the web is becoming a billboard, if I want to design for 5K I'd need a 5K image, from there I scal

Re: [css-d] Responsive Images

Basically the web is becoming a billboard, if I want to design for 5K I'd need a 5K image, from there I scale it down, or up because I'll be designing for mobile first, then I adjust the page and graphics accordingly for desktop. Christopher Tom Livingston Thursday,

Re: [css-d] Responsive Images

I think this works better if... #imghldr { width: 40rem; #myimage { width: 100%; That way you only have to change the size of #imghldr to change the size of #myimage Much easier in a @media IMO. http://fm.no-ip.com/SS/Suse/YaST/131/yast2-131-

Re: [css-d] Responsive Images

On Thu, Nov 6, 2014 at 7:42 PM, David Laakso wrote: > On Thu, Nov 6, 2014 at 7:17 PM, Tom Livingston wrote: >> Sent from my iPhone >> >> On Nov 6, 2014, at 6:38 PM, Crest Christopher >> wrote: >> >> Why do you recommend building mobile first ? >> >> >> Aside from being best practice [trmmed].. >

Re: [css-d] Responsive Images

On Thu, Nov 6, 2014 at 7:17 PM, Tom Livingston wrote: > Sent from my iPhone > > On Nov 6, 2014, at 6:38 PM, Crest Christopher > wrote: > > Why do you recommend building mobile first ? > > > Aside from being best practice [trmmed].. > I hope that you mean it happens to be "best practice" for you.

Re: [css-d] Responsive Images

On Thu, Nov 6, 2014 at 7:32 PM, Crest Christopher < crestchristop...@gmail.com> wrote: > > That does make sense to build simpler first then go desktop after, I just > may follow this logic ! > > > Not necessarily. Most of the time I can use just three images. Each image > can span more than one br

Re: [css-d] Responsive Images

On Thu, Nov 6, 2014 at 7:32 PM, Crest Christopher < crestchristop...@gmail.com> wrote: > That does make sense to build simpler first then go desktop after, I just > may follow this logic ! > > > Not necessarily. Most of the time I can use just three images. Each image > can span more than one brea

Re: [css-d] Responsive Images

That does make sense to build simpler first then go desktop after, I just may follow this logic ! Not necessarily. Most of the time I can use just three images. Each image can span more than one breakpoint. My base (mobile/phone) images usually get me up to my 600px breakpoint, for example.

Re: [css-d] Why is child wider than parent?

Take a look at box-sizing. http://css-tricks.com/box-sizing/ Adding it in late in the game will cause issues, however... On Thu, Nov 6, 2014 at 5:43 PM, Angela French wrote: > Darn box model! > > Thanks. > > -Original Message- > From: css-d-boun...@lists.css-discuss.org > [mailto:css-d

Re: [css-d] Responsive Images

Sent from my iPhone On Nov 6, 2014, at 6:38 PM, Crest Christopher wrote: Why do you recommend building mobile first ? Aside from being best practice, it is much harder and requires more code to achieve a mobile layout from a desktop first build because it requires you to "undo" a great deal of

Re: [css-d] Responsive Images

That's right David. If you have: img {max-width: 100%; The image will not exceed the width of its parent. Eric > On November 6, 2014 at 11:42 AM David Hucklesby wrote: > > > On 11/5/14, 9:22 PM, Felix Miata wrote: > > Crest Christopher composed on 2014-11-05 23:45 (UTC-0500): > > > >> If I

Re: [css-d] Responsive Images

Why do you recommend building mobile first ? There is a pro and a con with swapping images, the pro, you can use bitmap images, the con, you have to have, as I mentioned earlier, maybe up to six different resolutions for your images. The CSS may be the easiest to do, the hardest will be manag

Re: [css-d] Why is child wider than parent?

"Darn box model!" Well, the box model isn't set in stone you know. > On November 6, 2014 at 5:43 PM Angela French wrote: > > > Darn box model! > > Thanks. > > -Original Message- > From: css-d-boun...@lists.css-discuss.org > [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg

Re: [css-d] Why is child wider than parent?

Thanks! I don't code enough anymore. :-( -Original Message- From: David Laakso [mailto:laakso.davi...@gmail.com] Sent: Thursday, November 06, 2014 2:44 PM To: Angela French Cc: css-d (css-d@lists.css-discuss.org) Subject: Re: [css-d] Why is child wider than parent? On Thu, Nov 6, 2014

Re: [css-d] Why is child wider than parent?

On Thu, Nov 6, 2014 at 5:29 PM, Angela French wrote: > Hello, > Can anyone please tell me why the child (#band) is wider than the boundary of > its parent (#outcontainer)? I set width:100% on the child to make sure it > took up the entire width of the parent, but it went wider. Can't figure ou

Re: [css-d] Why is child wider than parent?

Darn box model! Thanks. -Original Message- From: css-d-boun...@lists.css-discuss.org [mailto:css-d-boun...@lists.css-discuss.org] On Behalf Of Georg Sent: Thursday, November 06, 2014 2:40 PM To: css-d@lists.css-discuss.org Subject: Re: [css-d] Why is child wider than parent? You have...

Re: [css-d] Why is child wider than parent?

You have... #band {padding-right:20px; width:100%;} ...which makes the band 20px wider than its parent. regards Georg __ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wi

[css-d] Why is child wider than parent?

Hello, Can anyone please tell me why the child (#band) is wider than the boundary of its parent (#outcontainer)? I set width:100% on the child to make sure it took up the entire width of the parent, but it went wider. Can't figure out what I'm missing here. It may be the concurrent use of disp

Re: [css-d] Responsive Images

David Hucklesby composed on 2014-11-06 08:42 (UTC-0800): > It’s not unlikely I am wet behind the ears, but I thought max-width simply > prevented the image from expanding to its natural size in smaller containers. > AFAIK the image will not stretch. It may depend on how astutely it's used. I ca

Re: [css-d] Responsive Images

On 11/5/14, 9:22 PM, Felix Miata wrote: > Crest Christopher composed on 2014-11-05 23:45 (UTC-0500): > >> If I want to use images on a responsive site, the images should be in >> the largest size possible then set the style to {max-width:100%} ? If >> they are not the largest size possible and the

Re: [css-d] Responsive Images

On Thu, Nov 6, 2014 at 9:43 AM, Crest Christopher < crestchristop...@gmail.com> wrote: > I'd like to read the article, when you find the link. > There is only one issue, if I'm doing my own custom design with a > smorgasbord of images etc. I have to find the largest, suppose a 5K image, > then do

Re: [css-d] Responsive Images

I'd like to read the article, when you find the link. There is only one issue, if I'm doing my own custom design with a smorgasbord of images etc. I have to find the largest, suppose a 5K image, then do my design magic in Photoshop, then scale the design at different resolutions. Question is,

Re: [css-d] Responsive Images

Swapping bg images is easy enough with media queries, however, many mobile device browsers will download images within other mqs. There is an easy way to stop this in most cases. For example, my base mobile styles (because you build pages mobile-first, right?) have a bg img. I'll use that img u

Re: [css-d] Responsive Images

I've been using a polyfill called picturefill. It will serve the necessary image based on media query. Very few people, if any, change browser viewport sizes while browsing like devs do in testing. Only the appropriate image gets served. No crazy amounts of server requests. Sent from my iPhone