Hi, for a client I have pages on the site where several images are displayed in different sizes and with gaps between the images. I want the images to scale proportionally when resizing the screen. When the images are docked to the grid, they don’t scale proportionally anymore. When the images aren’t docked to the grid, they scale proportionally, but the gaps between the images become way too small when I resize the screen and they start to overlap. How can I make the grid to scale the images proportionally? I hope my description is understandable. Many thanks for any help!
Many thanks for your answer and your support. For some reason this doesn’t work when I do it or I might be doing it wrong. When I dock the images vertically, and set them to scale proportionally, they still overlap. It might be because I can’t define the grid area properly. When I type in the specific columns, the image hops to another column it doesn’t belong to. For example the top image should be on columns 3-7 but it’s set to 3-8 and when I type in 7, it shrinks massively. Here is a screenshot of how I do it. I’m very grateful for any advice!
Many many thanks!
Hi @nadine-rasu
The images size is fluid (%), so if its 100% of 7 columns it will be smaller then 100% of 8 Columns.
The numbers in the grid area are like counting the Grid Lines. the start of the grid edge is 01. So column 1 is Start 01 End 02.
So If you want to position in columns 3-7 you need to define Start 03 End 08.
Hope it makes some sense
By the way, we are working on refinements for the Grid Area to make it more clear.
Many thanks for your respond. Unfortunately I still do something wrong, as I can’t get it to work with the gaps being consistent when I strech the screen to a wider size. As soon as I strech the screen to a wider size, the images overlap, although I have set the gridsize to a minimum vh. I have different rows, it only works with two rows where the images of the top row are docked to the bottom of the gridline and the images of the bottom row are docked to the top of the gridlide. This obviosly won’t work as the rows continue… Maybe it’s something I set up wrong in the grid, I don’t know…
Here are some screenshots again of what I’m doing with the hope, that you can help me.
Many thanks anyways!
Best, Nadine
I figured out where the problem was! I just need to have columns an not rows in my grid. And like you said, the docking positions need to be in % and not in px.
Many thanks for your help!
Unfortunately I can’t manage to get it work with rows. If I dock them to differnt rows with %, they still overlap when I resize the screen to a bigger size. If you can show me how to get it done with docking the images to different rows so they resize proportionally, this would be great! If not, no worries, I’ll figure it out somehow.
So the first thing i would check is the definition of the rows height and check that they can grow/shrink according to content. there is a chance that they have Height (e.g. Height=400px, Height=20VH etc…).
if that is the case, i would suggest to set the row height definition with minmax same as grid defaults: Min=PX, Max=MaxContent.
Many thanks for any help!
