Images appear on different position?! (Slide 1 vs. Slide 3)

I want the 3 icon images (above ‘Values:’ , ‘Vision:’ and ‘Process:’) to appear on the exact same position on Slide 1 and Slide 3 (and other slides to come, except Slide 2)…

  • The image-elements itself don’t have a Class assigned.
  • The Positioning of the image-elements therefore remained on ‘Static’
  • The column-elements on Slide 1 and Slide 3 use the same Class, therefore also the individual column blocks use the same Classes.

This results in the images on Slide 1 being neatly centered, yet on Slide 3 the same images are all moved to the left…??

I want to keep this simplicity (so not assign Classes to the images in Slide 3 and start Positioning them manually), and I want design consistency, this is making me go nuts why these images are on a different position…!

Could it be that the conflict is caused by that the movement+fade animations you’ll see on Slide 1, are not yet duplicated on Slide 3?

That’s the only difference I can spot now, for example when I do ‘Inspect element’ to browse through the code of the page.

NOTE: Toggle Preview-mode on/off a couple of times, for some reason when I visit the below Read-Only link, the Slide Nav. is not showing on page load and the arrow icons aren’t clickable:

Thanks in advance for helping me understand Webflow better, if you know why this Positioning issue is happening! :slight_smile:

It could be your Interactions, but overall I’d approach this a bit differently so that things are more consistent and simple for you to manage. I’m assuming you plan to have 3 icons & captions per slide ( most slides ) and that those will appear evenly horizontal on desktop, and probably vertical on mobile devices.

If so, columns is a pretty good tool for that. However you don’t want to style the Column itself. It’s just a layout structure, and doesn’t seem to take styling well. Instead, I’d put a DIV inside of the column, which contains your image and Text.

That DIV can probably have the same class, for all 3 icons, and on every slide. Its job is to simply center the icon and caption. You can attach your hover interaction to that class to create whatever effect you want and it will consistently appear everywhere.

I think you’ll get much more consistent results that way, and find your site work much easier, than trying to style the Columns directly.

1 Like

Thank you so much! I’m going to try this right now. :smiley:

1 Like