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

Alas, I finally have found a moment to respond.  All notes for this entry are taken from the following document:  Grammar Captive Template.  Please be patient with me as we walk through the restructuring of my webpage one step at a time.  I would like very much that we are always "on the same page" so-to-speak at every step of the way.

I will experiment with each suggestion inside my development folder until I can make it work with the intended result, whereupon I will introduce it on the actual page in question -- namely, www.grammarcaptive.com/overview.html.

I would like to begin by describing the general layout of the page before any media queries are made.  As my webdesign consists of a header, footer, and three middle columns, it is somewhat complex.

QUESTION ONE:  When you speak of column containers are you referring to only the #content, #middle, and #sidebar div-elements, or are you referring to these in addition to the #header and #footer elements?  I am assuming that the #pagewrap element will have no effect on what we are about to do.

Roddy

Share this post


Link to post
Share on other sites

All will become a column container as they transverse down to a single column for smaller devices, so if you have different padding for text or inner child containers then alignment will be broken.

Share this post


Link to post
Share on other sites

So, if I have understood properly, if one wishes to align content differently in different columns, the margin and padding spacing should be assigned to the column's content and not the column's wrapper.  Is this correct?

Roddy

Share this post


Link to post
Share on other sites

As I built my responsive design by copying what someone else had pioneered, I was not thorough in my understanding of how it worked.  For, after all, it worked!  Well, at least until I began adding my own content.  Now, I am paying the price for my failure to understand as well as I should have at the outset.  Accordingly, my first question in retrospect is the likely intended purpose of assigning the value of auto to the left and right margins in the page's wrapper.

#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}

Roddy

Share this post


Link to post
Share on other sites

I have now recoded the main style sheet for the overview.html webpage, and have sought with all my might to recode the overview.css and freewebinar_filler.css style sheets in a manner that will cause the freewebinar.html page to appear properly in the context into which it is written.  I have failed.

As I have performed this work in the context of an online development folder, I do not wish to expose its whereabouts to an anonymous general public.  In contrast, I would be willing to share its location with a W3-Schools mentor via private mail. Surely we can discuss the problem here in the general forum; simply, others will not be able to view the pages directly.

If there is a W3Schools mentor who is well-versed in CSS and willing, please make yourself known, and I will send you the link to the folder and webpage with your express promise not to share it with others.

Roddy

Share this post


Link to post
Share on other sites
22 hours ago, iwato said:

So, if I have understood properly, if one wishes to align content differently in different columns, the margin and padding spacing should be assigned to the column's content and not the column's wrapper.  Is this correct?

Roddy

You could do this, but it would be easier to apply to a inner column container.

21 hours ago, iwato said:

As I built my responsive design by copying what someone else had pioneered, I was not thorough in my understanding of how it worked.  For, after all, it worked!  Well, at least until I began adding my own content.  Now, I am paying the price for my failure to understand as well as I should have at the outset.  Accordingly, my first question in retrospect is the likely intended purpose of assigning the value of auto to the left and right margins in the page's wrapper.


#pagewrap {
	padding: 5px;
	width: 960px;
	margin: 20px auto;
}

Roddy

I don't know what pagewrap refers to?

Usually a layout consists of a

(1) Wrapper container that will fit the entire browser viewport width, possibly for full width navigation, header/footer content. (no padding left/right)

(2) Inner content wrapper that will hold content rows/columns whose width will be dependent on device width by media queries.

(3) With the columns, they can have identical padding, so as it transverse down from say a 3 column to 1 column resulting in becoming a single column/row for smaller devices, the alignment of text etc will be identical.

Also when applying a background-color you would target the outer columns to fill each of the columns fully only, or target any added inserted inner-columns which will show background colour away from the edge determined by a padding applied to outer-columns and make manipulating backgrounds this way more manageable.

Edited by dsonesuk

Share this post


Link to post
Share on other sites

OK, Dsonesuk.  I believed that I have followed your directions well.  This can be easily seen by opening to the Grammar Captive mainpage in a computer or smartphone browser window. Where my CSS structure breaks down is with my #middle column inserts -- not all mind you, but certain ones in particular.

Open, by way of example, the Free Consultation panel under the About section in the mainpage navigation bar.  Do this first in your browser window and then with your Smartphone.  For me, it performs well in the former (Firefox), but poorly in the latter (Safari) unless I turn my iPhone laterally.

Please advise.

Roddy

Edited by iwato

Share this post


Link to post
Share on other sites

Sorry! if a pop-up appears i leave, and i did!

You might as well have, "Sorry to see you go because of this annoying pop-up forced on you, without your permission."

Edited by dsonesuk

Share this post


Link to post
Share on other sites

In order to make the pop-up disappear you must load the page twice.  Once for your browser to recognize you as a previous user, and once to experience the effect of that recognition.  It is the way window.localStorage property works.  It came after you, not before you.  It is something that a person with your development knowledge should not only understand, but should have understood. I know longer experience the pop-up, and neither should you.

Roddy

Share this post


Link to post
Share on other sites

Unfortunately that won't work, as because I need to have refreshed clean empty history, when coding the browser I use clears history on exit, so no localstorage is saved.

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

×