Previous Message
Next Message

Responsive grid layout with graphics and scaling

Sent by Karl DeSaulniers on 30 June 2016 02:02


(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 [EMAIL-REMOVED]> 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 [EMAIL-REMOVED]]
> 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 [EMAIL-REMOVED]]
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/
Previous Message
Next Message

Message thread:

Possibly related: