Hello everybody and thank you in advance for the help you gonna give me,
I am getting mad in trying to find out how to make what I would like to achieve…
I would like to make my website with a grid made of photos or images, equal-sized, with a flexible layout, and all this should be responsive.
Those pictures or images will be rectangles : 300 px W / 250 px H
The layout of the scene will have a breakpoint each 300 px / and the sizes will go from 300 px to 1500 and even more (300, 600, 900, 1200, 1500,…)
If you stretch your browser window from 600 px to 900 px, there will be 2 images side by side in a row, and they will equally proportionally grow, until they reach 899 px, so with responsive design, there will be 3 rectangle of 300 px W, and so on…
What I am asking is very similar to the “4 equal-sized images side by side in horizontal band” topic, except that there is no text underneath but other rows of images.
Each time I try, the result is that the row on the bottom is not pushing the one underneath further down, but it goes over it…
Here are some sample sites, one that I found on another topic, and another one that I found on the Internet…
The topic was “Layout width desktop and mobile” and the website he talked about was this one : http://www.themesindustry.com/html/nayax/index_13.html
which is exactly the type of look I am looking for
The other one is this one : http://www.weareempire.co.uk/
and the behaviour of the rectangles is quite what I am looking for…
I hope my explanations are clear enough…
Thanks in advance,
Greetings…
Sorry but You can't use elements with fixed ratio. Both examples cannot be achieved in this way
You can't use elements with variabile height. Your responsive images should be masked with a group with "hidden overflow" (The overflow is clipped, and the rest of the content will be invisibile) like in the "4 equal-sized images side by side" template.
I did a few tests with your 4-column template, and apparently if you resize the frame of the group, which includes the picture, make a column out of it and add a picture underneath it seems to work. I also tweaked the settings a bit. Here is the template with the changes… Do you think it could also work like this ?
Hallo Hans, und Du auch vielen dank für deine Hilfe…
The way this template works is amazing… But isn’t there is a bit of scripting ? I really like this type of minimalistic layouts… I will try to make a mix out of these templates, and let you see afterwards…
A thing which has nothing to do with our purpose. I found a website where you can get very interesting e-books about web technologies, for free, and legally, so if I want to share this kind of information with the other people of the forum, how can I do it ?
better if you use only 4 images in each row (group 4x).
just make a copy of each 4x and change all images,
I created a new iphone layout with one box for row
BTW: I am still intrigued by the @h_classen technique ....I have to try with complex layouts.
basically i wrote those lines for @jon4896 who wanted to start with a fullscreenlayout and didn’t wanna loose scrolling …
he’s done a couple of sites (have a look at hypedocks.com ) using it. he’s not a scripter at all and seems to feel fine managing the workflow for this in conjunction with hype … so i guess it’s not that hard to adapt
more hype 
) using it. he’s not a scripter at all and seems to feel fine managing the workflow for this in conjunction with hype … so i guess it’s not that hard to adapt