Published site off by a few pixels compared to editor and preview

Design help Layout & Design
1

Hi Webflow community,

On my editor, I manage to align the image (children) to the background (parent).

image
image1071Ă—911 28.9 KB

Basically, my end goal is to align the illustration (in red) exactly on top of the lines of my background.

However, my preview on Webflow looks like this

image
image1144Ă—943 34.6 KB

and my published website looks like this

image
image1227Ă—977 56.7 KB

They are off by some pixels and not aligned to the lines of my background.

Here is my setup from top to bottom:

Section (Position: Fixed, 100% width, 100% height)
Div (Position: Relative, 100% width, 100% height)
Inside the Div, I have 2 images (Position: Absolute, sizes and positions set to specific %)

How do I get it to position exactly on the “pixels” I want for the editor, preview, and all screens?

p.s. I also tried converting all the % values into vh and vw so it lays right on top of it but also getting the same issue.

Thanks for your help in advance!

Here is my site Read-Only: LINK

2

@Eugene_Tan

The chosen design is inherently challenging to build in a responsive way. My suggestion to you is to create that Orange element in illustrator, save it as a SVG or PNG and upload a single element inside the parent div.

Then, you only have to control one image, rather than two.

2 Likes
3

I’m not able to test this for you on the browser. However, in the read-only mode I created a new Div that housed specifically the two images, then changed it to:

Display: Flexbox;
Direction: Vertical;
Align: Center;
Justify: Center;

For Image 50: margin-right: -1px;
For Image 52: margin-left: -1px;

That all seemed to do the trick.

1 Like
4

Hey @Eugene_Tan, I second Kevin, but I also noticed you’re trying to animate both pieces separately.

You have a ton of style settings in various places—both width and height settings on the image itself, then the image class, then the image div wrappers, then the full image flex wrapper. Additionally, “All Images” has styling beyond the defaults (not recommended, as you then have to correct per-image).

So I started from scratch and used CSS Grid ('cause I love Grid):

  1. Remove the duplicate “Div Block 22”. I renamed to “graphic-layout”. Set to Grid (0px gap, align: center); width and height to 100%. That’s all.
  2. Add the background image (here, named “bg”), set to manual position and cover the entire grid. Set width and height to 100%, object-fit: none (this is important, as it won’t scale the background with the viewport).
  3. Take your left image wrapper (here, “g-L”) and manually position in the grid, justify right. Display: flex, align: top. Margin-right: -1px. Height: 720px (use the editor controls not the image controls—this can be whatever value you’d like, I chose 720 out of habit).
  4. Take your right image wrapper (here, “g-R”) and manually position in the grid, justify left. Display: flex, align: top. Margin-left: -1px. Height: 720px (or whatever you use for the left).
  5. Remove all styling from the left and right images themselves, including on the “All Images”. They should be Max Width: 100%, display: inline-block, no box shadow. Plain ol’ images.

Here’s a quick screen recording.

Hope this helps!
Colin

2 Likes
5

Hey @Kevin_Mooney, thanks so much for your reply. That may work, but I was thinking to animate them to open in opposite directions. :sweat_smile:

6

@Eugene_Tan

For sure, I completely get that. You may have to follow the steps from @ColinSimmons.

Another consideration would be to animate that in a video, insert that video on top of the background. I guess my point in these instances, is to make the design simpler and/or easier to implement.

Responsive can be a CUSS, and I prefer to avoid it at all costs.

2 Likes
7

Thank you so much @ColinSimmons for the detailed explanation and even a screen recording!!! I have used grid so much for normal work but never on Webflow. Thank you so so much for your help again. It certainly worked and possibly was the best way I could implement it. :pray:

1 Like
8

@Kevin_Mooney I agree. Thanks for the advice. I will keep that in mind and yes responsive is a CUSS.

1 Like
9

So glad that it worked! Happy I could help. :smiling_face:

1 Like
10

Hey @ColinSimmons, if you don’t mind me bothering you again. I was wondering if there is a way to not set the bg object-fit to “none” because then it will just be a fixed size bg and cannot really cater for bigger screens. I think what I really need was to expand the bg to fit the whole vw and vh and still have the g-L and g-R aligned to it accordingly.