Jump to content
iwato

Juggling Dimensions in Responsive Design

Recommended Posts

WHO:  A problem for Dsonsuke.

BACKGROUND:  In a recent effort to make my website responsive, I have run into trouble with my website.

DILEMMA:  I have five panels that appear correctly in two (wide viewport and narrow viewport) of three instances (wide viewport, middle viewport, and narrow viewport). It is the middle viewport that I cannot get to appear correctly, and I do not know what is causing the problem.  When one adjusts the browser window from wide to narrow, and the three horizontally aligned panels are reduced from three to two, the contents of the middle panel is no longer centered and the left-margin appears exorbitantly large.  Please see, the Grammar Captive mainpage before commenting.

Roddy

Share this post


Link to post
Share on other sites

You've set the left column to a width of 28% and the middle column to a width of 54%, that leaves 18% of empty space between them.

Share this post


Link to post
Share on other sites

Your observation makes good sense until I try to adjust the following media rule to accommodate for the gap.  It has no effect.

/* for 700px or less.  Note: It was previously set to 600px. */
@media screen and (max-width: 700px) {

	#content {
		width: auto;
		float: none;
	}
	
	#middle {
		width: auto;
		width: -moz-auto;
		float: none;
		margin-left: 0px;
	}
	
	#sidebar {
		width: auto;
		width: -moz-auto;
		float: none;
	}
}

 

Share this post


Link to post
Share on other sites

That wouldn't! That only takes effect when the device width is 700px, the rule that gives you that gap happens when device width is 980px.

 

Share this post


Link to post
Share on other sites

OK.  It appears that I have been able to salvage my intended format with a minimum of secondary, negative effects.  What I cannot seem to achieve, however, is uniformity in width among my center panels.  Please perform the following experiment.

The EXPERIMENT

After opening to the Grammar Captive mainpage proceed to the navigation bar and find two menu options:  About and Free Consultation!  Click on each and notice that the background color does not fill across the entire width of the center panel.

QUESTIONWhat is prohibiting the background color from filling the entire width of the center panel?

Roddy

Share this post


Link to post
Share on other sites

The left and right padding applied to #middle, its forcing first direct child div 10px from the left/right edge of #middle, the child div of that first direct child div element with background colour can only fill the available width of that parent element.

You can give the first direct child div OR the actual div using background colour -10px left and right margin to bring back the left/right edges in to the required position

Edited by dsonesuk

Share this post


Link to post
Share on other sites

OK, Dsonesuk, it fixes the problem in my browser window, but creates a problem on my iPhone.  Is there a way to achieve the same goal on both apparati?

Roddy

Share this post


Link to post
Share on other sites

The obvious solution is to add the background colour to #middle element as its the width you require and obviously not affected by the padding, only its children are affected, resulting in smaller coverage.

Share this post


Link to post
Share on other sites

dsonesuk:  What is obvious to you is not obvious to me. 

I have taken your suggestion with regard to the negative margins and the appropriate place to change the width of my middle panel as suggested by the Furtive Fox.  All of this combined has mostly resolved the problem of the middle section on my computer's Firefox and Chrome browsers when the width of the viewport is changed.  You can check the results by opening to the Grammar Captive mainpage and clicking on the About and Free Consultation menu options under the heading Introduction in the navigation bar.

What I have sacrificed in so doing, however, is the alignment in my Safari browser on my iPhone for the same main div panels and other similarly constructed main div panel inserts.  Now, perhaps you can better understand what I meant by the title word Juggling

Surely, this problem can be overcome without my having to redesign my entire webpage.  Well, at least, it is my hope.

Roddy

Share this post


Link to post
Share on other sites

Maybe if you actually tried to understand how padding and margin work and how they affect other elements around or within them, which is really pretty basic, it would become more obvious and therefore prevent you making the same obvious mistake in future, which will prevent having to juggle or redesign the layout as you have found.

Actually I'm really annoyed by continuously going to your site and being forced to battle with annoying pop-ups everytime. YOU don't force a pop-up without user specifically choosing to see that pop-up, that's why pop-up blockers where made to prevent forced unwanted pop-ups, yours may not in your view be unwanted but give the user a choice. I can't be the only one who finds this pop-up setup annoying.

  • Like 1

Share this post


Link to post
Share on other sites

I have actually tried to remove the pop-up for repeat visitors on several occasions, but have yet to succeed in the task.  This said, it only takes two clicks to remove and the first pop-up is a genuine "Hi!".

I do thank you for your suggestion and someday I will surely achieve the task.  For the moment, however, I find proper alignment of my div tags in my iPhone viewport more important, and truly hope that it does not dissuade you from offering further suggestions in this regard.

Roddy

Edited by iwato

Share this post


Link to post
Share on other sites

It appears that Dsonesuk has no patience for amateur developers.
It is unfortunate, because he has such a good understanding of CSS and working with CSS is sometimes very difficult.

Roddy

Share this post


Link to post
Share on other sites

Why you say that! Because I didn't reply with a suggestion? you think everything/one should revolve around you, so i should reply instantly, well thats never going to happen, (1) I work in a different time zone, (2) I already have giving the obvious solution and if you choose to ignore it, its your problem not! mine.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

Dsonesuk, what I understand from the discussion thus far, is that you believe that I know next to nothing about the use of margins and padding.  Your criticism is well taken, since I am not completely comfortable with them.  Still, I can use them quite successfully at times.

It is also surely true that my webpage has been built in piecemeal fashion over a very long period of time.  Had I known everything, that I know now, when I began, I surely would have built it differently.  This confession, however, does not help me with my current dilemma. 

The DILEMMA:  Although it is true that the middle section of my webpage is filled in a variety of ways, the end result is always a replacement of the current content of the #main div.  Where this content comes from and in what viewport it is viewed has, unfortunately,  resulted in major confusion in alignment.

Now, you have been very helpful in the past, and if I have taken your goodwill for granted, I deeply apologize.

Can you be clearer in your solution?

Roddy

  • Like 1

Share this post


Link to post
Share on other sites

To align, all the columns containers should be fashioned the same way, so when you transverse from 3 to 2 and finally 1 they will all align. This means you have to allow for borders, padding and margins.

This is the most important thing to remember, once these container columns react in the same manner adding properties like background colours means they all give same result, adding same padding, means all child element will work to same padding, then adding background colours to this child element WILL give the same result. If you don't work with consistent borders padding, margins its obvious there's going to be an inconsistency in the alignment further on, its not down to experience, its common sense.  

 

Edited by dsonesuk

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

×