Menu icon Foundation
Full Screen Image Layout

Hello,

I am working on a layout and it is a full screen layout homepage, based on a lot of boxes spanning from 4 rows to 8 rows in width each. We need this to obviously be responsive, however right now we have three different layouts (large+, medium, small) since the height of the boxes is dependant on the image size.

We need a way to have this all in one layout.

To be more clear, right now we have three section of layouts, one has show-for-large-up, show-for-medium-only, and show-for-small-only. The client needs to be able to change these and we dont want them to have to create three different sized images and edit three different areas.

Does anyone know how to scale the height of the boxes without having them be dependant on the image size?

Thanks.

Equalizerfull screen

Hello,

I am working on a layout and it is a full screen layout homepage, based on a lot of boxes spanning from 4 rows to 8 rows in width each. We need this to obviously be responsive, however right now we have three different layouts (large+, medium, small) since the height of the boxes is dependant on the image size.

We need a way to have this all in one layout.

To be more clear, right now we have three section of layouts, one has show-for-large-up, show-for-medium-only, and show-for-small-only. The client needs to be able to change these and we dont want them to have to create three different sized images and edit three different areas.

Does anyone know how to scale the height of the boxes without having them be dependant on the image size?

Thanks.

Wes Mann about 5 years ago

The block grid lets you use just one layout.... it scales the layout down or up depending on screen size. http://foundation.zurb.com/docs/components/block_grid.html

That might work for you.

Karl Ward about 5 years ago

To be honest, I am not 100% sure I understand the question. Both the normal grid and the block-grid are responsive, and will scale the images within to nicely to fit. Do you have a link or mockup of the design you are trying to achieve? I am not quite sure what you are referring to in terms of "scale the height of the boxes", and also the title of the post "Full Screen Image Layout" ...