How To Fill The Screen?

HTML & CSS
22

Thank you. I am just learning css and it will take some time. That’s ok since I’m retired. I will think about what you’ve said and will probably have some questions.

1 Like
23

You say that my blue-wave background is attached to a grandchild element. What is the name of that element?

In your recommended solution you have:

#page-wrapper > #main

I’ve never seen this syntax. What does it mean?

flex:1 0 0%;

What is the meaning and importance of the 0%?

#pg-44-0> .panel-row-style{background:transparent;}

Why is this line limited to #pg-44-0?
Why is the background being made transparent?

Thanks.

24

It’s in the code I posted above here.

#pg-44-0> .panel-row-style{background:transparent;}

I removed the background from that element in my demo otherwise you would have had two backgrounds applied and your one would be in the wrong place and not filling the area.

It’s the child combinator commonly known as a child selector > and selects elements only if they are direct children (not grandchildren). I used it to emphasise the point that only direct children of a flex container are flex items.

Just a habit of mine as IE11 doesn’t like zero there but seems fine with 0%.

That was your existing rule. Nothing to do with me. I just used it to remove the background image you had placed there. In your real page you would effectively remove the rule for the wrongly placed background image anyway and just use the version I gave you above.

When injecting LIVE CSS into your page I needed to over-ride the background image code in order for my demo to show properly

1 Like
25

This website is a WordPress project. Also I used a plugin called PageMaker. PageMaker determined the structure of the site. For example, it placed the blue-wave background image way down in the hierarchy. When setting up to use flex, could I have applied it to the parent/child as determined by the SiteOrigin structure? Or is it better, as you did, to move upward in the hierarchy?

Also, your code above sets the flex details for the child. I assume that I still need to keep the parent specified as it is.

:not(.page-id-46) #page-wrapper {
  display: flex;
  flex-flow: column;
  min-height: 100vh;
  background: blue;
}

Does a flex parent have to be an id or can it be a class?

Thanks.

26

Your page structure does not easily allow the waves image to take up full viewport height in its current position. It could be done but would mean creating many nested flex parents in order to allow them to take up the required viewport height. Your header is in a completely different section so we don’t have simple flex items as siblings.

The easiest solution with the current html is simply to move the background image to the element that is a sibling of the original flex-container because we can manipulate that to do what we want.

Yes keep the :not rule prefix to exclude the code from the page in question.

No it can be either but generally classes are easier to manage because they carry less weight than ids. IDs will over-ride a simple class. Specificity is very important ion CSS. Remember that ids are unique and you can’t have more than one with the same name on a page. Classes are ubiquitous and you can reuse them many times.

1 Like
27

Thank you.

1 Like
28

Hi,

Did you consider using the image as a body background in order to cover the full page?

I’m curious, because I’ve got the impression you just wanted the background to adapt to the height of the page. :slight_smile:

1 Like
29

Thanks to great help from PaulOB I think the issue is resolved.

1 Like
30

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