Issues with layout

Hello guys,

If you see in the section the right image with skateboard and the div block in top right corner are not aigned in the toggle preview as in the designer view. Any inputs? Below is the read only link.

cheers,
yogesh

https://preview.webflow.com/preview/team-flaashxs-dynamite-project?utm_medium=preview_link&utm_source=designer&utm_content=team-flaashxs-dynamite-project&preview=d436f842d253d327ac67d5d6a8eb99df&mode=preview

Hi @Yogesh,

Can you rephrase you question?
A screen capture would be great to understand what you mean.

1 Like

Hi @avivtech,

Thank you for your response.

The vertical text ‘SCROLL’ and the ‘Line’ above it and the ‘right image’ and the 'yellow box on the top right corner are properly aligned in the Design view. But when I go to the toggle preview the alignment of the elements is disturbed. I tried with different positions and still the same.

Design View

Toggle Previw

Also the read only link:
https://preview.webflow.com/preview/team-flaashxs-dynamite-project?utm_medium=preview_link&utm_source=designer&utm_content=team-flaashxs-dynamite-project&preview=d436f842d253d327ac67d5d6a8eb99df

Cheers!

Ok, understood :smile:

You are using absolute positioning for the elements.

CSS Positioning:

An element with position: absolute; is positioned relative to the nearest positioned ancestor (instead of positioned relative to the viewport, like fixed).

However; if an absolute positioned element has no positioned ancestors, it uses the document body, and moves along with page scrolling.

Try using a different way to position the elements.
This is a great place to learn positioning-

I have three options to position the elements. Static, Relative and Absolute. The other two are not relevant. I tried to with Static and Relative and still issues with the alignment. Do you think it has something to do with the hierarchy or its just the position?

Both Hierarchy & Position.
I strongly suggest to watch some webflow university tutorials. That will make things more clear for you.

Could you maybe check the hierarchy and tell me if that is effecting the alignment?
Thank you!

I already did… :slight_smile:

Hahaha :slight_smile:

I mean could you tell me how to solve the issue since you have already seen the problem?:grimacing:

The solution to this problem is not a single property or even a couple of property changes. It involves changing hierarchy of several different elements, and using different layouts and base elements then the ones you used.

The entire approach you are using on this page for positioning elements is wrong (who am I to tell what’s right and what’s wrong :sweat_smile:)
It will lead you to a dead end at some point since all elements are positioned absolutely.

This is why I was referencing you to the Webflow university, where you can learn the basics and understand how to recreate this page in a better way.

Other great way will be to hire a Webflow Expert

Alright, thank you @avivtech. I will start from the scratch and try a different format.

Cheers!!

1 Like