Aligning a div according to another div?

im creating a website for class. I currently at a hurdle of my div tags. I have a timeline page. Where contents will alternate left and right.
what is currently on there is the many attempts i have played around on my css page.
I have it on a live server:


the code that changes how the left side looks is:

.each-event:nth-child(even) {
    margin-left: calc(50% - 621px); }

The problem im having is the left side “blocks” doesnt react correctly when the window is resizing. the right side is the way i would like it. The block resizes and doesnt move away from the “block” in the center. I this to be a percentage instead of pixels because I want the page to be user friendly as well on smart phones.
the question is how would i setup the css ( which the file is actually a scss filed compiled int a css file with Koala) to make it so that the left container doesnt move to the left but align to the left side of the line?

The problem with your proposed solution, is that you are not accounting for the window width, it will always shift by at least 621px no matter what.

You can try to work on some kind of formula to account for that, or you can use javascript and a window resize listener and dynamically compute that.

Or, you can use either flexbox or css grid and let the browser figure it out by itself.
For example with flexbox you can create a series of rows and alternate the justify-content property to have them aligned left-right.

And a simple media query to have them justified at center for smaller devices, if you fell like you are running out of space.


side note:
You probably want to add min-width to your blocks as well, since so far the only property is:

    width: 32%;

This means that the smaller the screen, the thinner they’ll get. With a min-width at least they won’t get past that threshold


Here is a simple demo for you:

Hope this helps :+1:

1 Like

oh yeah no those are just values i been messing with. I been editing in my local directory on my computer. The thing is these are div and uses JS to do the whole scroll reveal. It took me a very long time to get that working so im trying to avoid messing with the setup.

Im trying to make the blocks more responsive. i know it is already but i mean it as for when a person is on smart phones. cuz the defined px size will make it too big for a smart phone

That’s why building mobile-first is best practice.
Mostly every layout built mobile-first is okay on a big screen,
but a lot of layouts built on a big screen are not-usable on a mobile.

1 Like

I think you have to stack the timeline at some point. On small screens there just isn’t enough horizontal space.