CSS: WHERE DID THE LAYERS GO?
When you are first working on a responsive site, well, actually, when you are learning CSS in general, layers tend to disappear on you. At first it’s very frustrating, but maybe the layer is actually there, just not visible. The screenshots illustrate that most of the content of the footer is missing.
Note: the small size is being viewed in the same browser window as the default size, except that the width of the screen has been reduced to the small size.
Generally, when the responsive site is built with CSS, all the code from the default size goes to the browser, and the browser decides what to show. You can see this by going to View -> Page Source in the browser. Even if some layers are set to be display: hidden; for some layers, the code is still there.
If we check out the footer layers in the Firefox Inspector tool, we see that the footer has quite a few layers.
#colophon- #FooterContent
- 2 nav_menus and 2 widgets
#colophonThe screenshot shows the 2nd layer: #FooterContent. You can tell by the naming convention that it is a custom layer added by Montana Webmaster. The Inspector shows that there is a max-height limit of 250px. That looks like it’s the problem!
We can do a test to see if that is the layer that is cutting off the content by setting #FooterContent to 500px. Now, we see that more of the footer elements are showing.
For this task, we have to keep the fact that we are now overriding rules in the parent theme and rules in the child theme default size in the back of our minds. When we change the height to 500px in the second #FooterContent, we are working in the CSS for the <480px responsive size, to override, height: auto; in the default size.
But, as often happens, we have a new problem: the green block didn’t increase. In any CSS fix, the problem can be in multiple layers. Changing #FooterContent gave room for the extra content to show, but work on the appearance isn’t finished. So, we need to turn our attention to which layer has the background rule.
Once all the sizing is finished, there will be additional coding to do with the goose logo and the contact information. But, first, if decisions about each element haven’t been made with the client, it will be time to show the client the footer and discuss the content. If a graphic artist created the design, it will only require going to the design.