Hello, again I would like to ask for your advice.
I have a finished page in 960 pixels resolution and now I am trying to make the size 320 pixels for mobile display.
Is there any way to lock the finished 960 resolution page so that it doesn’t break when I edit the 320 page?
As soon as I move the Layout or add a new Layout at 320 resolution, it will irreversibly break my finished page at 960 pixels.
I’ve been struggling with this all day today.
Can you give me any advice on how you solve this?
I can’t avoid having to add a new Layout in 320 resolution, which I hide in 960 resolution. Hiding it no longer fixes the broken page.
The 960 breakpoint shouldn’t be affected by the 360 breakpoint. If it is is an issue, try enclosing your 960 site content within a layout block and then switch to the 360 site layout. You may have to delete the 360 layout and ten add it back again to see the result.
I’m sending a demonstration.
Picture 1 is the finished 960 pixel object layout page.
Picture 2 is a work in progress page with a resolution of 320. At this resolution I copy and re-paste the Image/Video Grid and at that point I have a broken finished 960 pixel page (Picture 3)
I’ve tried putting the copied layer as low as possible and copy and pasting from there so it doesn’t hit the objects, but every time I move or paste, all the layers rearrange themselves.
As I wrote, I can’t avoid inserting another Image Grid.
Can I ask, Do you have the interim device sizes set to autoscale?. And did you adjust the grid cells on the 320 device to better reflect the layout you want.
Yeah. I only work in 960 and 320 pixel resolution. The rest is set as auto magnification.
At 1920 resolution, the title is moved above the grid. I had to put - do not publish.
At 768 resolution it breaks the Layout Image grid completely. Auto shrink does not work. I also put unpublish.
This is the first site where I am working with Image Grid and Layout Grid. They have a lot of good features. Thanks to the advice of others, I used a grid with smaller cell size in 320 resolution and that allows me more variability with the images.
Now to what’s causing the problem.
I have a lot of images in the Image grid. It’s not good for people to scroll for a long time on mobile, it won’t keep them entertained. I have customized the grid to show only the first 6 photos and keep the others hidden. Then I inserted an accordion and again Layout Image underneath it with the focuses following the first sample of photos. See image.
And here I have to insert a copy of the Image grid again to follow the first photos. When pasted, nothing terrible happens on page 320. The layouts will shift, but that doesn’t bother me because I’m still making them.
What is annoying is that pasting the Lyout Image at 320 resolution breaks my finished 960 pixel page.
I’ve been solving this by taking a pencil and paper and writing down the coordinates of all the Layouts, and then putting them back after breaking them. I can’t do it any other way yet.
Sorry for the translation. I use Deepl.com
I think this may have something to do with a known issue which is currently being fixed. What I do know is that if you set up a custom grid on a 1200 site, as well as a custom grid for the 320, setting the interim devices to auto scale will upset the 320 layout. It maybe that because you are using a 960 device instead of the 1200, its causing problems in the opposite direction. It’s an issue I’ve had myself and it can be frustrating. But, a fix in on the way and shouldn’t be too long before being released - please be patient and continue working on your site until the fix is released - it shouldn’t be too long before release.
One thing to note, is that you shouldn’t really hide portions of the layout grid between different layouts. It would be better to create two layout grids and place them one above the other on your wide page, and hide one of them on your 320 page if you don’t want all the images to be seen on that device.
