I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions.

Jonathan — Fri, 27 Oct 2023 14:37:36 +0000

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: https://drive.google.com/file/d/1Lya-fi2MaLEE22Q3IWA9gB-7LHirHRAX/view?usp=sharing

Proof that the columns are the same presets: https://drive.google.com/file/d/14qGXd2AihZENUSgiJAiiGEcFwYlZ3XjN/view?usp=sharing

/ Please watch this video: https://drive.google.com/file/d/1nPRE8hj2VZoCNP7OJQQJLgs_YFAYDnRL/view?usp=sharing

𝗔𝘀 𝘁𝗵𝗲 𝘁𝗶𝘁𝗹𝗲 𝘀𝘁𝗮𝘁𝗲𝘀; 𝗜 𝗮𝗺 𝗹𝗼𝗼𝗸𝗶𝗻𝗴 𝗳𝗼𝗿 𝗰𝗼𝗱𝗲 𝘁𝗵𝗮𝘁 𝗰𝗮𝗻 𝗳𝗶𝘅 𝗔𝗟𝗟 𝗲𝗹𝗲𝗺𝗲𝗻𝘁𝘀 𝗲𝘅𝗮𝗰𝘁𝗹𝘆 𝘄𝗵𝗲𝗿𝗲 𝘁𝗵𝗲𝘆 𝗮𝗿𝗲 𝗶𝗻 𝘁𝗵𝗲 𝗲𝗱𝗶𝘁𝗼𝗿 𝗮𝗰𝗿𝗼𝘀𝘀 𝗯𝗼𝘁𝗵 𝘁𝗵𝗲 𝗽𝗿𝗲𝘃𝗶𝗲𝘄/𝗽𝘂𝗯𝗹𝗶𝘀𝗵𝗲𝗱 𝗿𝗲𝘀𝗼𝗹𝘂𝘁𝗶𝗼𝗻𝘀.

I found this URL that may be helpful; https://stackoverflow.com/questions/52239770/how-to-keep-a-few-elements-in-the-same-position-at-different-resolutions#52265716 ; 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: https://preview.webflow.com/preview/gliphel?utm_medium=preview_link&utm_source=designer&utm_content=gliphel&preview=ce95c3784c3f51d2f13062221479b53c&pageId=653b941a5b170543920e63e7&workflow=preview

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)

DEV Community: Jonathan

I am looking for CSS code that can KEEP ALL ELEMENTS POSITIONED in the SAME spot across all resolutions.