Positioning a Div

HTML & CSS
1

I have so far created a header with some animations in. I then created a content div with another animation in. It should just appear after the header section but it doesn’t appear at all until you shrink the screen to mobile view.

Any tips on finding out why? Here’s the site:

http://web-legend.com/cssproject/

2

Because all the candle stuff is in here

image

3

Ah I see.

So I added and extra curly bracket there but no change. Is it an error in the html?
It should be outside of the header section

4

Sorry, I was unclear. There isn’t an error in the css, just in how you’re telling it to be applied.

The reason you’re only seeing the candle (I’m guessing that’s the additional animation you’re talking about) is because of this line

@media (max-width: 768px)

This means that ALL css within those brackets will only be applied if the screen width is 768px or smaller. If you want the animation to work in all screen sizes, it and any additional styles that apply to it will need to be moved outside the curly brackets for that media query.

5

Thank you. I removed the main-content from the mobile css but it didn’t work. I then removed the mobile css completely but it’s still the same. If you refresh it should have saved my changes?Do you think I need to add an extra container for the whole body or maybe my indentations is effecting the child/parent interaction?

6

If you are talking about content-area-main then the candles won’t show in that div because you have absolutely placed them without setting a positioning context.

If you add position:relative to the parent then the candle will be absolutely placed relative to that parent and not the viewport.

e.g.

.content-area-main {
    height: 30vh;
    display: block;
    position: relative;/* creates the positioning context starting point for absolute children*/
}
7

The problem may be that the content is animated using the opacity property, which makes the element invisible but does not change its actual position in the document flow. Try using animation using the transform or display property so that the content actually appears after the title animation. Also check to see if there are any conflicts or errors in the CSS or JavaScript code that may prevent the content from appearing.