Jump to content
Sign in to follow this  
iwato

CSS Media Rule and Flexbox Dysfunction

Recommended Posts

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.

 

 

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

  • Like 1

Share this post


Link to post
Share on other sites

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 by iwato

Share this post


Link to post
Share on other sites

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

 

Thank you!

 

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

×