A Problem of Alignment -- Device and Browser inconsistency

[iwato]

BACKGROUND:  In my most recent effort to fix the alignment problems associated with the responsive design of my site's mainpage I have managed to overcome several important hurdles.  There does remain one problem, however, that I cannot seem to fix.  This has to do with the rendering of inserted div elements in my site's mainpage.

By way of example

1) Open Grammar Captive's mainpage in a smartphone -- preferably iPhone, for this is where I have detected the problem.

2) Click on the About option under Introduction in the navigation bar.  The insert appears correct.  No background color has been set.

3) Click on the Free Consultation option under Introduction where the background color has been set and notice the alignment failure in the left margin.

Now, follow the same three steps, but with any browser on a normal computer, but achieve the affect by narrowing your browser window.  The alignment problem does not occur.

By the way, when I turn my phone sideways, the problem goes away.

QUESTION:  What might be causing the above described inconsistency?

Roddy

[Funce]

Do you have screenshots you can post? I'm not able to identify the erroneous behaviour.

[iwato]

Hi, Funce!

I am glad to learn that you cannot find any misalignment.  What device are you using to view the mainpage and inserted panels?

Please compare the following two screen shots taken from an iPhone 5.  Both of these panels are inserted from menu options under the heading Introduction in the mainpage navigation bar.

There are two things wrong with what you see.

1) The alignment of the two panels appears different.  The second (freeconsultation.png) overrides the left margin.  The first (disclaimer.png) does not.

2) The color of the first panel changes from light to dark, if the second panel is opened before the first.  This color change is then inherited in all subsequently opened panels under the Introduction section and likely elsewhere as well.  The first panel is supposed to have a light background.

Roddy

[iwato]

Yes, indeed.  In my effort to fix the Free Consultation panel, I have destroyed the color formatting for nearly every subsequent insert on the mainpage.

Roddy

[Funce]

Hi there Roddy,

I tested using Chrome (In its mobile emulation form) and using Chrome on my Samsung S9+.

From what I remember from my cursory observation yesterday (or earlier today) one of your scripts, though I cannot remember which, was importing a new stylesheet which applied styles to your #middle element. The styles were never unapplied or otherwise overridden elsewhere. That would be the main issue for the colour changing. Have you seen the Jquery function AddClass? It's pretty helpful when you want to apply predefined CSS styles through Javascript.

https://api.jquery.com/addclass/
https://api.jquery.com/removeclass/

 

I was unable to click on the links today to test, your overview.js has an error at line 423. You've commented out the beginning of a multiline comment block.

Edited August 30, 2018 by Funce

[iwato]

It took nearly a day's work, but I believe that the task is complete -- not for all pages mind you, but at least now I know what needs to be done for the rest.  Please check wherever you can, and earn yourself a trophy!

It is too bad about Dsonesuk.  He used to be so helpful.

The key pages to toggle in any and all orderings are:

Introduction / About
Visitor Profile / Event Profiles
Introduction / Disclaimer and Invitation
Introduction / Free Consultation

Roddy

Edited September 2, 2018 by iwato

[dsonesuk]

Too bad about forced pop-up, it would help to improve user enjoyment of the site so much more.

[iwato]

Dsonesuk.  It is only forced, if you insist on being a new visitor each and every time that you return.  Grammar Captive rewards fidelity.  It is the first thing you read on the mainpage after you have been introduced to the site's host and the content of the site.

Truly, it is too bad.  I used to enjoy your help, for you are by far the W3Schools leading expert on CSS.

Roddy