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!
For the images to scale proportionally you need to dock them only to one direction only on the vertical axis (top / middle / bottom).
and to check the Scale Proportionally checkbox in the image size settings
and for the images to not overlap you should check that each one is defined in the grid area that you want.
Hope that helps
Please feel free to right back if you have any more questions.
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!
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!
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!
If it works for you now, its great
The rows should work too…
If you still need to consult the issue, or any other, please share the link of the published site and i will take a look.
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.
Many thanks anyways for your help!
Hey @nadine-rasu ,
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.
Hope it helps