Text is running straight down the page

Need some help with my css on this project. Its on the css for the media query 1024px, the text just runs straight dow the page without any width. I am trying to get it so the text sits under the name of the planet, but I can not get it to move. I noticed that if I get rid of the h1 with the planet name then it does what I want. It is hard to put in a pen since I have several files importing and exporting

First off, use max-width and min-height instead of width and height, and be careful about using such large margins to push elements.

The parent container is a flexbox container with a width set, the child elements must share the space. You have a large amount of margin-left on the buttons that are taking up the space.

I would also suggest you create a container for the h1 and p elements so you have two flex items inside the flex parent planetInfo. That will also make the h1 and p stack as expected (having a heading and paragraph side-by-side is almost never what you want).

1 Like

Appreciate it! Always the best help.

I have always wondered about this. I have usually questioned myself when doing this, but then at the same time it works so then I dont look into it.

Unless the unit used for setting the margin is relative to the viewport (or parent container size) it is very unlikely to work at different screen sizes. At least not with such large margins.

You should never wait very long to check the CSS you write at different sizes. Oherwise, you will just paint yourself into a corner. When you write CSS think responsive from the start.

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.