Jump to content

Responsive Design - More iPhone Alignment Problems


iwato

Recommended Posts

BACKGROUND:  There appears to be no end to my iPhone alignment woes.  I can only hope that these same problems are not occurring on other devices. 

The DILEMMA:  In the navigation bar of the Grammar Captive mainpage find the menu option GC Tutor under the heading Products and click on the option.  At the outset the alignment should be well-behaved both in your computer and iPhone viewports.  Now scroll down to the section entitled What? in the GC Tutor panel and click on the And much more ... toggle switch at the bottom of the section.  Proper alignment is lost and cannot be regained until one clicks again in the navigation bar.

Unfortunately, all of the old tricks and some newly imposed modifications fail.

Any ideas?

Roddy

Link to comment
Share on other sites

It looks like to me you're missing a `float: none;` for that section that you're referring to. 

The specific spot you're looking for is
gc_template.css - Line 112

#middle {
  width: auto;
  width: -moz-auto;
  margin-left: 0px;
  float: none; /* Add this */
}

 

From my end, this looks like it works. Feel free to let me know if it does not.

 

This section, in particular, was escaping the page wrapper, making me think there was some alignment or flex going on. I was not incorrect.

Edited by Funce
  • Like 1
Link to comment
Share on other sites

Thanks, funce!

Unfortunately, I did not receive your entry until just now.  In a way I am glad,  else I would likely not have fixed other problems associated with the panel.

I just spent the entire day reformatting the entire page.  The use of flex-box has resolved the problem nicely.

Roddy

Link to comment
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
×
×
  • Create New...