CSS Media Rule and Flexbox Dysfunction

[iwato]

BACKGROUND:  I have recently created a new page based on code used on another page that appears to be functioning well.  As the content is different, however, it was necessary that I make several important modifications.  Still, the basic format is the same, and I do not understand why the new content is not responding as it should.  As always, I have tried a variety of experiments before coming to you including resetting the values of the width property of both the media rule and the media rule's content, reordering the script order of both the imported CSS files and their content, as well as the placement of the CSS rules that command the flex-box.   My CSS selectors appear to be appropriate as I am able to generate change.  Unfortunately, the desired change is not the change that I am generating.

QUESTION:  What is the most likely cause of the dysfunction?

ORIGINAL PAGE:  Observe the behavior of the pages navigation bar, main section, right sidebar, and footer as the size of your viewport expands and contracts.  On my devices (iMac, MacBook, and iPhone) the behavior is the desired behavior.  The various section appear to function well no matter the selected browser.

http://www.grammarcaptive.com/overview.html

NEW PAGE:  Although the main content section is empty, the right sidebar does not function as intended under the second media rule -- this, despite its proper functioning under the first and third rules.

http://www.grammarcaptive.com/podcast_dev_copy.html
 

NOTE:  I'll not place any code as everything is easily viewed online.

 

 

[justsomeguy]

There's a 404 for one of the files on that page, is that the problem?  Does this have anything to do with XML?

[iwato]

JSG:  Thank you for the heads up.  I did not realize that I had posted this query to the XML forum and have moved it to the CSS forum where it belongs.  I do not understand why one of the pages did not open, though.  I just tried both of the links, and they were working fine.

Please delete this entry.   I apologize for the misplacement.

Roddy

[justsomeguy]

The page itself opens, but the developer tools show a 404 on one of the Javascript files I think.

[iwato]

Yes a function was being called for which there was no longer a reference.

I was not terribly thorough in the deconstruction of the page before I began rebuilding it.  I usually catch this sort of things at the end, unless, of course they cause trouble along the way.  In this case i removed  the function call, but the problem with the media rule persists.

In any case, thank you.

Edited August 12, 2017 by iwato

[iwato]

Please delete this entry so that it is not confused with the entry correctly listed in the CSS forum.

 

Thank you!