Jump to content
iwato

A Problem of Alignment -- Device and Browser inconsistency

Recommended Posts

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

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

disclaimer.PNG

freeconsultation.PNG

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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 by Funce
  • Like 1

Share this post


Link to post
Share on other sites

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

Share this post


Link to post
Share on other sites

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

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

×