Re: [css-d] Responsive grid layout with graphics and scaling

[Tom Livingston]

Ok, I'll play with it. Thanks.

On Saturday, July 16, 2016, Karl DeSaulniers  wrote:

> Oh no, that is the part you needed to change Tom.
> I only set those to do that for the example to show you could set
> different sizes and it worked.
> If you set them to the same height and change the widths, I believe that
> is what you were talking about.
> If not, then good luck, I tried.. :)
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> > On Jul 15, 2016, at 8:19 AM, Tom Livingston  > wrote:
> >
> > This does not do what I was looking for. Images scale at different times
> > and are different sizes while doing so. Looks like flex is the best
> option.
> >
> > Thanks for the time!
> >
> >
> > On Sat, Jul 2, 2016 at 12:52 AM, Karl DeSaulniers  >
> > wrote:
> >
> >> Hey Tom,
> >> I had this in my codepen. Made a few adjustments to taylor to your needs
> >> (hopefully).
> >> I "think" this is what you're going for. The :nth-child stuff is just
> for
> >> demo purposes.
> >> This also doesn't use flex. You will have to season to taste though and
> >> make it work for you.
> >>
> >> http://codepen.io/designdrumm/pen/BzRrKg
> >>
> >> Best,
> >>
> >> Karl DeSaulniers
> >> Design Drumm
> >> http://designdrumm.com
> >>
> >>
> >>
> >>
> >> On Jul 1, 2016, at 12:44 PM, Tom Livingston  > wrote:
> >>
> >>> On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell <
> ch...@chrisrockwell.com >
> >>> wrote:
> >>>
>  Hi Tom,
> 
>  OK, I think they should scale, by default, at the same time also.  I'm
>  apparently pretty dense this week but are you finding otherwise?
> >> Consider
>  this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
> 
> >>>
> >>>
> >>> This is great, yes. However, will it work without flex? Sorry, don't
> have
> >>> time to play with it right now...
> >>>
> >>>
> >>>
> >>>
> >>> --
> >>>
> >>> Tom Livingston | Senior Front End Developer | Media Logic |
> >>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >>>
> >>>
> >>> #663399
> >>> __
> >>> 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/
> >>
> >
> >
> >
> > --
> >
> > Tom Livingston | Senior Front End Developer | Media Logic |
> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >
> >
> > #663399
> > __
> > 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/
>


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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 grid layout with graphics and scaling

[Karl DeSaulniers]

Oh no, that is the part you needed to change Tom.
I only set those to do that for the example to show you could set different 
sizes and it worked.
If you set them to the same height and change the widths, I believe that is 
what you were talking about.
If not, then good luck, I tried.. :)

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 15, 2016, at 8:19 AM, Tom Livingston  wrote:
> 
> This does not do what I was looking for. Images scale at different times
> and are different sizes while doing so. Looks like flex is the best option.
> 
> Thanks for the time!
> 
> 
> On Sat, Jul 2, 2016 at 12:52 AM, Karl DeSaulniers 
> wrote:
> 
>> Hey Tom,
>> I had this in my codepen. Made a few adjustments to taylor to your needs
>> (hopefully).
>> I "think" this is what you're going for. The :nth-child stuff is just for
>> demo purposes.
>> This also doesn't use flex. You will have to season to taste though and
>> make it work for you.
>> 
>> http://codepen.io/designdrumm/pen/BzRrKg
>> 
>> Best,
>> 
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>> 
>> 
>> 
>> 
>> On Jul 1, 2016, at 12:44 PM, Tom Livingston  wrote:
>> 
>>> On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell 
>>> wrote:
>>> 
 Hi Tom,
 
 OK, I think they should scale, by default, at the same time also.  I'm
 apparently pretty dense this week but are you finding otherwise?
>> Consider
 this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
 
>>> 
>>> 
>>> This is great, yes. However, will it work without flex? Sorry, don't have
>>> time to play with it right now...
>>> 
>>> 
>>> 
>>> 
>>> --
>>> 
>>> Tom Livingston | Senior Front End Developer | Media Logic |
>>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>>> 
>>> 
>>> #663399
>>> __
>>> 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/
>> 
> 
> 
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 
> #663399
> __
> 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 grid layout with graphics and scaling

[Tom Livingston]

This does not do what I was looking for. Images scale at different times
and are different sizes while doing so. Looks like flex is the best option.

Thanks for the time!


On Sat, Jul 2, 2016 at 12:52 AM, Karl DeSaulniers 
wrote:

> Hey Tom,
> I had this in my codepen. Made a few adjustments to taylor to your needs
> (hopefully).
> I "think" this is what you're going for. The :nth-child stuff is just for
> demo purposes.
> This also doesn't use flex. You will have to season to taste though and
> make it work for you.
>
> http://codepen.io/designdrumm/pen/BzRrKg
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> On Jul 1, 2016, at 12:44 PM, Tom Livingston  wrote:
>
> > On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell 
> > wrote:
> >
> >> Hi Tom,
> >>
> >> OK, I think they should scale, by default, at the same time also.  I'm
> >> apparently pretty dense this week but are you finding otherwise?
> Consider
> >> this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
> >>
> >
> >
> > This is great, yes. However, will it work without flex? Sorry, don't have
> > time to play with it right now...
> >
> >
> >
> >
> > --
> >
> > Tom Livingston | Senior Front End Developer | Media Logic |
> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >
> >
> > #663399
> > __
> > 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/
>



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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 grid layout with graphics and scaling

[John Andrews]

Karl, I am using Linux Mint 16 with Firefox.  My screen is big to bigger
depending on the system I am using.  I just checked using a narrow Firefox
window down to the minimum.  I also use chrome from time to time.  I tend
to avoid Windows and prefer Linux.  I use LXLE, Mint, and currently Knoppix
because I am helping a blind man learn how to use a computer.

---  John Andrews


On Jul 6, 2016 10:24 PM, "Karl DeSaulniers"  wrote:

> Thanks John. Your the second one to mention the justify text.
> I may have to look into that, but I really don't like align left.
> Either space between words or on the side of the whole paragraph.
> Personally I like the text to make columns.
>
> May I ask what OS or device/browser you were using? As well as screen size?
> Thank you for the compliment. Appreciate your feedback.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> > On Jul 6, 2016, at 8:03 PM, John Andrews  wrote:
> >
> > Hovering on links in (I think ) Services did not bring up more text.
> > Nothing.
> >
> > I notice that on narrow views the justified text sometimes gets very wide
> > spacing and looks funny.
> >
> > Otherwise a beautiful site.
> >
> > ---  John Andrews
> >
> >
> > ---   John Andrews
> >
> > On Wed, Jul 6, 2016 at 5:23 AM, Karl DeSaulniers 
> > wrote:
> >
> >> Hello Tom,
> >> As well as everyone else. Can I invite you to take a look at a new
> website
> >> of mine?
> >> Please let me know if it breaks for you? Should be fully responsive "as
> >> in" you can shrink the window and it responds.
> >> TIA
> >>
> >> http://tunkeysolutionsinc.com
> >>
> >> @Tom — if you take a look at the images on this site, you will see how I
> >> implemented what you're requesting I believe as well as the code pen
> below.
> >>
> >> Best,
> >>
> >> Karl DeSaulniers
> >> Design Drumm
> >> http://designdrumm.com
> >>
> >>
> >>
> >>
> >>> On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers 
> >> wrote:
> >>>
> >>> Hey Tom,
> >>> I had this in my codepen. Made a few adjustments to taylor to your
> needs
> >> (hopefully).
> >>> I "think" this is what you're going for. The :nth-child stuff is just
> >> for demo purposes.
> >>> This also doesn't use flex. You will have to season to taste though and
> >> make it work for you.
> >>>
> >>> http://codepen.io/designdrumm/pen/BzRrKg
> >>>
> >>> Best,
> >>>
> >>> Karl DeSaulniers
> >>> Design Drumm
> >>> http://designdrumm.com
> >>>
> >>>
> >>>
> >>>
> >>> On Jul 1, 2016, at 12:44 PM, Tom Livingston  wrote:
> >>>
>  On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell <
> ch...@chrisrockwell.com
> >>>
>  wrote:
> 
> > Hi Tom,
> >
> > OK, I think they should scale, by default, at the same time also.
> I'm
> > apparently pretty dense this week but are you finding otherwise?
> >> Consider
> > this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
> >
> 
> 
>  This is great, yes. However, will it work without flex? Sorry, don't
> >> have
>  time to play with it right now...
> 
> 
> 
> 
>  --
> 
>  Tom Livingston | Senior Front End Developer | Media Logic |
>  ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 
>  #663399
>  __
>  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/
> >>
> >> __
> >> 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/
>
> __
> css-discuss [css-d@lists.css-discuss.org]
> http://www.css-discuss.org/mailman/listinfo/css-d
> List 

Re: [css-d] Responsive grid layout with graphics and scaling

[Karl DeSaulniers]

Hmmm, interesting Philippe.
However there is sparse support for those. 
I guess at the end of the day it is all about readability, 
so I will most likely go the align left route with gritted teeth.
Thanks for the input. Great idea.  

Too bad browsers cant display text like a word processor. 
You would think in the 21st century they would with technology being as 
advanced as it is,
but I fear browser creators are stuck in the 1980s and are stomping their feet 
to keep it the way it is so they don't have to do work. Lame IMO.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 6, 2016, at 9:56 PM, Philippe Wittenbergh  wrote:
> 
> 
>> On Jul 7, 2016, at 11:23 AM, Karl DeSaulniers  wrote:
>> 
>> Your the second one to mention the justify text.
>> I may have to look into that, but I really don't like align left. 
>> Either space between words or on the side of the whole paragraph.
>> Personally I like the text to make columns.
> 
> You might consider hyphenation to alleviate the “rivers” in the text (words 
> spaced out more than needed). That makes things harder to read.
> 
> https://developer.mozilla.org/en/docs/Web/CSS/hyphens
> 
> (you’ll need prefixes)
> 
> On small screen devices (anything below an iPad…) I really prefer reading 
> text that is left-aligned though (even with hyphenation turned on).
> 
> Philippe
> --
> Philippe Wittenbergh
> http://l-c-n.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/

Re: [css-d] Responsive grid layout with graphics and scaling

[Philippe Wittenbergh]

> On Jul 7, 2016, at 11:23 AM, Karl DeSaulniers  wrote:
> 
> Your the second one to mention the justify text.
> I may have to look into that, but I really don't like align left. 
> Either space between words or on the side of the whole paragraph.
> Personally I like the text to make columns.

You might consider hyphenation to alleviate the “rivers” in the text (words 
spaced out more than needed). That makes things harder to read.

https://developer.mozilla.org/en/docs/Web/CSS/hyphens

(you’ll need prefixes)

On small screen devices (anything below an iPad…) I really prefer reading text 
that is left-aligned though (even with hyphenation turned on).

Philippe
--
Philippe Wittenbergh
http://l-c-n.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/

Re: [css-d] Responsive grid layout with graphics and scaling

[Karl DeSaulniers]

Thanks John. Your the second one to mention the justify text.
I may have to look into that, but I really don't like align left. 
Either space between words or on the side of the whole paragraph.
Personally I like the text to make columns.

May I ask what OS or device/browser you were using? As well as screen size?
Thank you for the compliment. Appreciate your feedback.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 6, 2016, at 8:03 PM, John Andrews  wrote:
> 
> Hovering on links in (I think ) Services did not bring up more text.
> Nothing.
> 
> I notice that on narrow views the justified text sometimes gets very wide
> spacing and looks funny.
> 
> Otherwise a beautiful site.
> 
> ---  John Andrews
> 
> 
> ---   John Andrews
> 
> On Wed, Jul 6, 2016 at 5:23 AM, Karl DeSaulniers 
> wrote:
> 
>> Hello Tom,
>> As well as everyone else. Can I invite you to take a look at a new website
>> of mine?
>> Please let me know if it breaks for you? Should be fully responsive "as
>> in" you can shrink the window and it responds.
>> TIA
>> 
>> http://tunkeysolutionsinc.com
>> 
>> @Tom — if you take a look at the images on this site, you will see how I
>> implemented what you're requesting I believe as well as the code pen below.
>> 
>> Best,
>> 
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>> 
>> 
>> 
>> 
>>> On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers 
>> wrote:
>>> 
>>> Hey Tom,
>>> I had this in my codepen. Made a few adjustments to taylor to your needs
>> (hopefully).
>>> I "think" this is what you're going for. The :nth-child stuff is just
>> for demo purposes.
>>> This also doesn't use flex. You will have to season to taste though and
>> make it work for you.
>>> 
>>> http://codepen.io/designdrumm/pen/BzRrKg
>>> 
>>> Best,
>>> 
>>> Karl DeSaulniers
>>> Design Drumm
>>> http://designdrumm.com
>>> 
>>> 
>>> 
>>> 
>>> On Jul 1, 2016, at 12:44 PM, Tom Livingston  wrote:
>>> 
 On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell >> 
 wrote:
 
> Hi Tom,
> 
> OK, I think they should scale, by default, at the same time also.  I'm
> apparently pretty dense this week but are you finding otherwise?
>> Consider
> this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
> 
 
 
 This is great, yes. However, will it work without flex? Sorry, don't
>> have
 time to play with it right now...
 
 
 
 
 --
 
 Tom Livingston | Senior Front End Developer | Media Logic |
 ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
 
 
 #663399
 __
 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/
>> 
>> __
>> 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/

__
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 grid layout with graphics and scaling

[John Andrews]

Hovering on links in (I think ) Services did not bring up more text.
Nothing.

I notice that on narrow views the justified text sometimes gets very wide
spacing and looks funny.

Otherwise a beautiful site.

---  John Andrews


---   John Andrews

On Wed, Jul 6, 2016 at 5:23 AM, Karl DeSaulniers 
wrote:

> Hello Tom,
> As well as everyone else. Can I invite you to take a look at a new website
> of mine?
> Please let me know if it breaks for you? Should be fully responsive "as
> in" you can shrink the window and it responds.
> TIA
>
> http://tunkeysolutionsinc.com
>
> @Tom — if you take a look at the images on this site, you will see how I
> implemented what you're requesting I believe as well as the code pen below.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> > On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers 
> wrote:
> >
> > Hey Tom,
> > I had this in my codepen. Made a few adjustments to taylor to your needs
> (hopefully).
> > I "think" this is what you're going for. The :nth-child stuff is just
> for demo purposes.
> > This also doesn't use flex. You will have to season to taste though and
> make it work for you.
> >
> > http://codepen.io/designdrumm/pen/BzRrKg
> >
> > Best,
> >
> > Karl DeSaulniers
> > Design Drumm
> > http://designdrumm.com
> >
> >
> >
> >
> > On Jul 1, 2016, at 12:44 PM, Tom Livingston  wrote:
> >
> >> On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell  >
> >> wrote:
> >>
> >>> Hi Tom,
> >>>
> >>> OK, I think they should scale, by default, at the same time also.  I'm
> >>> apparently pretty dense this week but are you finding otherwise?
> Consider
> >>> this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
> >>>
> >>
> >>
> >> This is great, yes. However, will it work without flex? Sorry, don't
> have
> >> time to play with it right now...
> >>
> >>
> >>
> >>
> >> --
> >>
> >> Tom Livingston | Senior Front End Developer | Media Logic |
> >> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >>
> >>
> >> #663399
> >> __
> >> 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/
>
> __
> 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 grid layout with graphics and scaling

[Karl DeSaulniers]

Correct. Thank you MIke.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 6, 2016, at 3:31 PM, Mike O'Toole  wrote:
> 
> There's an R missing in the URL - it should be http://turnkeysolutionsinc.com/
> 
> Mike
> 
> On 07/06/2016 09:38 AM, Tom Livingston wrote:
>> I'm getting a server error.
>> 
>> 
>> On Wednesday, July 6, 2016, Karl DeSaulniers  wrote:
>> 
>>> Hello Tom,
>>> As well as everyone else. Can I invite you to take a look at a new website
>>> of mine?
>>> Please let me know if it breaks for you? Should be fully responsive "as
>>> in" you can shrink the window and it responds.
>>> TIA
>>> 
>>> http://tunkeysolutionsinc.com
>>> 
>>> @Tom — if you take a look at the images on this site, you will see how I
>>> implemented what you're requesting I believe as well as the code pen below.
>>> 
>>> Best,
>>> 
>>> Karl DeSaulniers
>>> Design Drumm
>>> http://designdrumm.com
>>> 
 On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers  On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell  wrote:
> Hi Tom,
> 
> OK, I think they should scale, by default, at the same time also.  I'm
> apparently pretty dense this week but are you finding otherwise? Consider 
> this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
> This is great, yes. However, will it work without flex? Sorry, don't have 
> time to play with it right now...
> 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.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-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 grid layout with graphics and scaling

[Mike O'Toole]

There's an R missing in the URL - it should be 
http://turnkeysolutionsinc.com/


Mike

On 07/06/2016 09:38 AM, Tom Livingston wrote:

I'm getting a server error.


On Wednesday, July 6, 2016, Karl DeSaulniers  wrote:


Hello Tom,
As well as everyone else. Can I invite you to take a look at a new website
of mine?
Please let me know if it breaks for you? Should be fully responsive "as
in" you can shrink the window and it responds.
TIA

http://tunkeysolutionsinc.com

@Tom — if you take a look at the images on this site, you will see how I
implemented what you're requesting I believe as well as the code pen below.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com


On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers 

Re: [css-d] Responsive grid layout with graphics and scaling

[Tom Livingston]

I'm getting a server error.


On Wednesday, July 6, 2016, Karl DeSaulniers  wrote:

> Hello Tom,
> As well as everyone else. Can I invite you to take a look at a new website
> of mine?
> Please let me know if it breaks for you? Should be fully responsive "as
> in" you can shrink the window and it responds.
> TIA
>
> http://tunkeysolutionsinc.com
>
> @Tom — if you take a look at the images on this site, you will see how I
> implemented what you're requesting I believe as well as the code pen below.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> > On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers  > wrote:
> >
> > Hey Tom,
> > I had this in my codepen. Made a few adjustments to taylor to your needs
> (hopefully).
> > I "think" this is what you're going for. The :nth-child stuff is just
> for demo purposes.
> > This also doesn't use flex. You will have to season to taste though and
> make it work for you.
> >
> > http://codepen.io/designdrumm/pen/BzRrKg
> >
> > Best,
> >
> > Karl DeSaulniers
> > Design Drumm
> > http://designdrumm.com
> >
> >
> >
> >
> > On Jul 1, 2016, at 12:44 PM, Tom Livingston  > wrote:
> >
> >> On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell  >
> >> wrote:
> >>
> >>> Hi Tom,
> >>>
> >>> OK, I think they should scale, by default, at the same time also.  I'm
> >>> apparently pretty dense this week but are you finding otherwise?
> Consider
> >>> this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
> >>>
> >>
> >>
> >> This is great, yes. However, will it work without flex? Sorry, don't
> have
> >> time to play with it right now...
> >>
> >>
> >>
> >>
> >> --
> >>
> >> Tom Livingston | Senior Front End Developer | Media Logic |
> >> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >>
> >>
> >> #663399
> >> __
> >> 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/
>
> __
> 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/



-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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 grid layout with graphics and scaling

[Karl DeSaulniers]

My apologies to all. There was a typo in the url. (Thanks Philippe!)
Time for bed.

http://turnkeysolutionsinc.com

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 6, 2016, at 4:23 AM, Karl DeSaulniers  wrote:
> 
> Hello Tom,
> As well as everyone else. Can I invite you to take a look at a new website of 
> mine?
> Please let me know if it breaks for you? Should be fully responsive "as in" 
> you can shrink the window and it responds.
> TIA
> 
> http://tunkeysolutionsinc.com
> 
> @Tom — if you take a look at the images on this site, you will see how I 
> implemented what you're requesting I believe as well as the code pen below.
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> 
>> On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers  wrote:
>> 
>> Hey Tom,
>> I had this in my codepen. Made a few adjustments to taylor to your needs 
>> (hopefully).
>> I "think" this is what you're going for. The :nth-child stuff is just for 
>> demo purposes.
>> This also doesn't use flex. You will have to season to taste though and make 
>> it work for you.
>> 
>> http://codepen.io/designdrumm/pen/BzRrKg
>> 
>> Best,
>> 
>> Karl DeSaulniers
>> Design Drumm
>> http://designdrumm.com
>> 
>> 
>> 
>> 
>> On Jul 1, 2016, at 12:44 PM, Tom Livingston  wrote:
>> 
>>> On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell 
>>> wrote:
>>> 
 Hi Tom,
 
 OK, I think they should scale, by default, at the same time also.  I'm
 apparently pretty dense this week but are you finding otherwise? Consider
 this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
 
>>> 
>>> 
>>> This is great, yes. However, will it work without flex? Sorry, don't have
>>> time to play with it right now...
>>> 
>>> 
>>> 
>>> 
>>> -- 
>>> 
>>> Tom Livingston | Senior Front End Developer | Media Logic |
>>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>>> 
>>> 
>>> #663399
>>> __
>>> 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/
> 
> __
> 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 grid layout with graphics and scaling

[Karl DeSaulniers]

Hello Tom,
As well as everyone else. Can I invite you to take a look at a new website of 
mine?
Please let me know if it breaks for you? Should be fully responsive "as in" you 
can shrink the window and it responds.
TIA

http://tunkeysolutionsinc.com

@Tom — if you take a look at the images on this site, you will see how I 
implemented what you're requesting I believe as well as the code pen below.
 
Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




> On Jul 1, 2016, at 11:52 PM, Karl DeSaulniers  wrote:
> 
> Hey Tom,
> I had this in my codepen. Made a few adjustments to taylor to your needs 
> (hopefully).
> I "think" this is what you're going for. The :nth-child stuff is just for 
> demo purposes.
> This also doesn't use flex. You will have to season to taste though and make 
> it work for you.
> 
> http://codepen.io/designdrumm/pen/BzRrKg
> 
> Best,
> 
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
> 
> 
> 
> 
> On Jul 1, 2016, at 12:44 PM, Tom Livingston  wrote:
> 
>> On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell 
>> wrote:
>> 
>>> Hi Tom,
>>> 
>>> OK, I think they should scale, by default, at the same time also.  I'm
>>> apparently pretty dense this week but are you finding otherwise? Consider
>>> this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
>>> 
>> 
>> 
>> This is great, yes. However, will it work without flex? Sorry, don't have
>> time to play with it right now...
>> 
>> 
>> 
>> 
>> -- 
>> 
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>> 
>> 
>> #663399
>> __
>> 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/

__
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 grid layout with graphics and scaling

[Karl DeSaulniers]

Hey Tom,
I had this in my codepen. Made a few adjustments to taylor to your needs 
(hopefully).
I "think" this is what you're going for. The :nth-child stuff is just for demo 
purposes.
This also doesn't use flex. You will have to season to taste though and make it 
work for you.

http://codepen.io/designdrumm/pen/BzRrKg

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




On Jul 1, 2016, at 12:44 PM, Tom Livingston  wrote:

> On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell 
> wrote:
> 
>> Hi Tom,
>> 
>> OK, I think they should scale, by default, at the same time also.  I'm
>> apparently pretty dense this week but are you finding otherwise? Consider
>> this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
>> 
> 
> 
> This is great, yes. However, will it work without flex? Sorry, don't have
> time to play with it right now...
> 
> 
> 
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 
> #663399
> __
> 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 grid layout with graphics and scaling

[Tom Livingston]

On Fri, Jul 1, 2016 at 8:58 AM, Chris Rockwell 
wrote:

> Hi Tom,
>
> OK, I think they should scale, by default, at the same time also.  I'm
> apparently pretty dense this week but are you finding otherwise? Consider
> this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?
>


This is great, yes. However, will it work without flex? Sorry, don't have
time to play with it right now...




-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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 grid layout with graphics and scaling

[Chris Rockwell]

Hi Tom,

OK, I think they should scale, by default, at the same time also.  I'm
apparently pretty dense this week but are you finding otherwise? Consider
this: http://codepen.io/anon/pen/GqmdxG - is that the behavior?

On Thu, Jun 30, 2016 at 8:37 PM Tom Livingston  wrote:

> On Wednesday, June 29, 2016, Chris Rockwell 
> wrote:
>
> > If this layout were in a narrower viewport than shown, and keeping
> >> the grid as shown, in my mind the graphics in the middle row would
> begin to
> >> scale before the rest.
> >
> >
> > For clarification: are you saying that's how you think it should work
> *or*
> > that is the desired effect you're going for?
> >
> Sorry Chris. In my mind, if there images are gonna scale, they should scale
> at the same time, whenever that may be.
>
>
>
> >
> >
> >> They are widest and their combined width would be the first to match the
> >> viewport width and therefore scale before the rest causing different
> line
> >> widths etc.
> >
> >
> > I'm having trouble wrapping my head around what you're going for, can you
> > provide an image of what it would be like at a smaller width?
> >
> Not at the moment. Hopefully my other answer will help.
>
>
>
> >
> >
> >> --
> >>
> >> Tom Livingston | Senior Front End Developer | Media Logic |
> >> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >>
> >>
> >> #663399
> >> __
> >> 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/
> >>
> >
>
> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> __
> 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 grid layout with graphics and scaling

[Tom Livingston]

On Wednesday, June 29, 2016, Chris Rockwell  wrote:

> If this layout were in a narrower viewport than shown, and keeping
>> the grid as shown, in my mind the graphics in the middle row would begin to
>> scale before the rest.
>
>
> For clarification: are you saying that's how you think it should work *or*
> that is the desired effect you're going for?
>
Sorry Chris. In my mind, if there images are gonna scale, they should scale
at the same time, whenever that may be.



>
>
>> They are widest and their combined width would be the first to match the
>> viewport width and therefore scale before the rest causing different line
>> widths etc.
>
>
> I'm having trouble wrapping my head around what you're going for, can you
> provide an image of what it would be like at a smaller width?
>
Not at the moment. Hopefully my other answer will help.



>
>
>> --
>>
>> Tom Livingston | Senior Front End Developer | Media Logic |
>> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>>
>>
>> #663399
>> __
>> 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/
>>
>

-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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 grid layout with graphics and scaling

[Chris Rockwell]

>
> If this layout were in a narrower viewport than shown, and keeping
> the grid as shown, in my mind the graphics in the middle row would begin to
> scale before the rest.


For clarification: are you saying that's how you think it should work *or*
that is the desired effect you're going for?


> They are widest and their combined width would be the first to match the
> viewport width and therefore scale before the rest causing different line
> widths etc.


I'm having trouble wrapping my head around what you're going for, can you
provide an image of what it would be like at a smaller width?


> --
>
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
>
>
> #663399
> __
> 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 grid layout with graphics and scaling

[Tom Livingston]

Thanks Karl

On Wednesday, June 29, 2016, Karl DeSaulniers  wrote:

> (Sent two messages before this one. Not sure if they made it through, but
> this is both combined. Sorry for the spam)
>
> Hi Tom,
> I would have IMGs set to 100% width height auto and the IMG containers set
> to 100% width except they have a max-width and min-width set.
> The max-width size keeps them from becoming too large on a big screen and
> the min-width keeps them from becoming too small.
> Any width that is between the max-width and min-width would have 100%
> width containers and thus 100% width IMGs.
>
> Also, the containers don't have to be 100%, they can be a pixel size too
> or a different percentage.
> For instance, the green box with the image, I would set that image
> container to 70% because it looks to take up 70% of the green box
> and set a max-width of say 150px because that looks to be how big it is
> with a wide screen.
>
> At least that is how I do it and it works great for my situations.
>
> Best,
>
> Karl DeSaulniers
> Design Drumm
> http://designdrumm.com
>
>
>
>
> On Jun 29, 2016, at 3:57 PM, Tom Livingston  > wrote:
>
> > List,
> >
> > I have not run into this situation before and I am hoping I am just over
> > thinking it or it's a "can't see the forest for the trees" kind of thing.
> >
> > Given this layout:
> > http://tomliv.com/css-d/grid-of-diff-sizes/grid-with-diff-sizes.jpg
> >
> > The black boxes represent svg graphics. Text would be live text (not part
> > of the graphics).
> >
> > If this layout were in a narrower viewport than shown, and keeping the
> grid
> > as shown, in my mind the graphics in the middle row would begin to scale
> > before the rest. They are widest and their combined width would be the
> > first to match the viewport width and therefore scale before the rest
> > causing different line widths etc. Also, even if the graphics were all
> the
> > same width, three across would scale before two across.
> >
> > How would you style this situation in a responsive page?
> >
> > It's possible to change widths or stack at a certain breakpoint, but I
> fear
> > this would cause ugly 'small elements in a large width' issues.
> >
> > Thanks in advance for any thoughts
> >
> >
> > --
> >
> > Tom Livingston | Senior Front End Developer | Media Logic |
> > ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> >
> >
> > #663399
> > __
> > 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/
>


-- 

Tom Livingston | Senior Front End Developer | Media Logic |
ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com


#663399
__
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 grid layout with graphics and scaling

[Karl DeSaulniers]

(Sent two messages before this one. Not sure if they made it through, but this 
is both combined. Sorry for the spam)

Hi Tom,
I would have IMGs set to 100% width height auto and the IMG containers set to 
100% width except they have a max-width and min-width set.
The max-width size keeps them from becoming too large on a big screen and the 
min-width keeps them from becoming too small.
Any width that is between the max-width and min-width would have 100% width 
containers and thus 100% width IMGs.

Also, the containers don't have to be 100%, they can be a pixel size too or a 
different percentage.
For instance, the green box with the image, I would set that image container to 
70% because it looks to take up 70% of the green box 
and set a max-width of say 150px because that looks to be how big it is with a 
wide screen. 

At least that is how I do it and it works great for my situations.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




On Jun 29, 2016, at 3:57 PM, Tom Livingston  wrote:

> List,
> 
> I have not run into this situation before and I am hoping I am just over
> thinking it or it's a "can't see the forest for the trees" kind of thing.
> 
> Given this layout:
> http://tomliv.com/css-d/grid-of-diff-sizes/grid-with-diff-sizes.jpg
> 
> The black boxes represent svg graphics. Text would be live text (not part
> of the graphics).
> 
> If this layout were in a narrower viewport than shown, and keeping the grid
> as shown, in my mind the graphics in the middle row would begin to scale
> before the rest. They are widest and their combined width would be the
> first to match the viewport width and therefore scale before the rest
> causing different line widths etc. Also, even if the graphics were all the
> same width, three across would scale before two across.
> 
> How would you style this situation in a responsive page?
> 
> It's possible to change widths or stack at a certain breakpoint, but I fear
> this would cause ugly 'small elements in a large width' issues.
> 
> Thanks in advance for any thoughts
> 
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 
> #663399
> __
> 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 grid layout with graphics and scaling

[Karl DeSaulniers]

Hi Tom,
I would have IMGs set to 100% width height auto and the IMG containers set to 
100% width except they have a max-width and min-width set.
The max-width size keeps them from becoming too large on a big screen and the 
min-width keeps them from becoming too small.
Any width that is between the max-width and min-width would have 100% width 
containers and thus 100% width IMGs.

At least that is how I do it and it works great for my situations.

Best,

Karl DeSaulniers
Design Drumm
http://designdrumm.com




On Jun 29, 2016, at 3:57 PM, Tom Livingston  wrote:

> List,
> 
> I have not run into this situation before and I am hoping I am just over
> thinking it or it's a "can't see the forest for the trees" kind of thing.
> 
> Given this layout:
> http://tomliv.com/css-d/grid-of-diff-sizes/grid-with-diff-sizes.jpg
> 
> The black boxes represent svg graphics. Text would be live text (not part
> of the graphics).
> 
> If this layout were in a narrower viewport than shown, and keeping the grid
> as shown, in my mind the graphics in the middle row would begin to scale
> before the rest. They are widest and their combined width would be the
> first to match the viewport width and therefore scale before the rest
> causing different line widths etc. Also, even if the graphics were all the
> same width, three across would scale before two across.
> 
> How would you style this situation in a responsive page?
> 
> It's possible to change widths or stack at a certain breakpoint, but I fear
> this would cause ugly 'small elements in a large width' issues.
> 
> Thanks in advance for any thoughts
> 
> 
> -- 
> 
> Tom Livingston | Senior Front End Developer | Media Logic |
> ph: 518.456.3015x231 | fx: 518.456.4279 | medialogic.com
> 
> 
> #663399
> __
> 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/