i’ve been a long-term user of Webflow; although I hadn’t designed a whole lot until now.
Well, I am coming across a LOT of issues; primarily the situation where Webflow’s responsiveness-system automatically scales; or rather moves elements when you change the resolution based on how much the original breakpoint is stretched smaller/larger from where it is originally placed on (x) resolution via (x) breakpoint. I’ve found a solution that was makeshift, I somehow got the center column of a grid to keep all elements in the same position.
But it wasn’t absolute (Just like absolute positioning); although (x) elements were placed in the same column with the same width setting; every setting being the same, there would be some that would move positions and some that would stay the same. Initially, they were all stabally staying the same. I have tried every single width setting/other settings on BOTH the grid and individual elements, vice-versa.
Since then, I have not been able to replicate this, despite using the same preset on a dummy grid; and using standalone elements/containers, it doesn’t function the same either. Even with the same settings I set on the grid; having set on the elements.
More so even, the ‘preview’ is not accurate to the published version 100% of the time.
Sometimes, elements are positioned in random spots which change differently when I re-position the element’s original position.
Proof of my claim AND proof my site IS stable, and my practices ARE good: 2023-10-27 02-02-31.mkv - Google Drive
Proof that the columns are the same presets: test3.mkv - Google Drive
/ Please watch this video: test1.mp4 - Google Drive
𝗔𝘀 𝘁𝗵𝗲 𝘁𝗶𝘁𝗹𝗲 𝘀𝘁𝗮𝘁𝗲𝘀; 𝗜 𝗮𝗺 𝗹𝗼𝗼𝗸𝗶𝗻𝗴 𝗳𝗼𝗿 𝗰𝗼𝗱𝗲 𝘁𝗵𝗮𝘁 𝗰𝗮𝗻 𝗳𝗶𝘅 𝗔𝗟𝗟 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀 𝗲𝘅𝗮𝗰𝘁𝗹𝘆 𝘄𝗵𝗲𝗿𝗲 𝘁𝗵𝗲𝘆 𝗮𝗿𝗲 𝗶𝗻 𝘁𝗵𝗲 𝗲𝗱𝗶𝘁𝗼𝗿 𝗮𝗰𝗿𝗼𝘀𝘀 𝗯𝗼𝘁𝗵 𝘁𝗵𝗲 𝗽𝗿𝗲𝘃𝗶𝗲𝘄/𝗽𝘂𝗯𝗹𝗶𝘀𝗵𝗲𝗱 𝗿𝗲𝘀𝗼𝗹𝘂𝘁𝗶𝗼𝗻𝘀.
I found this URL that may be helpful; html - How to keep a few elements in the same position at different resolutions - Stack Overflow ; but I tried using the code to no avail. I may be using it wrong.
Also; this code appears to only affect 1 single element. And when I type in the specific element class-name (such as div block 4); it doesn’t do anything.
How do I go about that? And is there any code that exists which I can throw into my page’s CSS block which makes the position of all elements completely absolute (Stay in the same spot cross-resolution)…?
Here is a read-only link: Webflow - Gliphel
I tried almost every setting I could on an element-basis. Nothing worked to keep the position the same except the magic I came across the center column in my parent grid. Can’t seem to replicate it using the same settings on grid/elements as I mentioned.
(These are all the same issue, it is focused on 1 topic/subject)