Please don't kill me. It's my first project. Please help :)

I am getting quite frustrated about my #timeline. How to make it work when resizing?
Thank you for your time. :slight_smile:

Lol :slight_smile: Sorry I forgot adding link. https://codepen.io/MikeSense/pen/XWbLRXW here this mess is.

Hi Mikesense,
welcome to the FCC forum.

By default a plain html list works pretty well on mobile. Beyond that you will likely want to center it and limit its maximum width at a certain point, so that the lines don’t become overly long. (here is a demo for you)

In addition I assume you want to give it your own style. For that it would be helpful if you could show us your code and tell us in more detail what you would like to create. (codepen or jsfiddle etc. are great for that)

No problem. :slight_smile:

So you will likely want to remove this padding from the list:
padding: 0px 0px 0px 300px;

Then it’s practical to look at the smallest size first, fix it and then add media queries as needed.

On mobile this width looks too narrow:

#note {
  width: 50%;
}

But you could then use a max-width at about 700px window width. It might also be a good idea to do that on one of the containers (tribute info or higher up), so you have to do it only once, not for each element. (like paragraph, list, header, …)

Didn’t understand you completely , cause I am noob. :slight_smile:

But got it much better thanks to you. Thank you!
I already had @media snippet, but i deleted it cause it didn’t work at all like I wanted(thought even for second that @media queries are stupid). Now i changed it thanks to your advice.

https://codepen.io/MikeSense/pen/KKpjqqM
Will do some more tweaks tomorrow.

SUPER THANKS!

1 Like