I finally got my home page working and I copied the code to use it as a template and now I am realizing that I don’t understand how things work and I can’t easily paste all of that code here.
On my home page I use display:table and have one table cell as the main area and the other table cell for the aside.
In the main area I have one of those rotating box gizmos that rotates pictures or in my case text.
I set this rotator to 832px wide, and it stays set at that width on a super-wide screen. And when the width shrinks (e.g. on smart phone) the box turns flexible and keeps getting narrower.
This all works nicely.
Now I want to create an article template that behave in a similar manner. That is, it should be 832px wide and not expand more if the viewport expands, but if the screen gets narrower, then I want the article to be flexible and get skinner.
I am not seeing how my home page works based on code like this…
Yes, I agree the code I posted and the results I am seeing do not match. And hopefully you can understand why I don’t want to post my entire code base.
Things are further complicated because my home page has this really complicated rotator thing that I just added on but did not code, plus that complicated horizontal box thing you helped me create this past fall. Remember?
Let’s pretend this is a black box…
What kind of CSS would keep a box 832px wide, and when the parent expands it still stays at 832px, but when the parent shrinks, it shrinks with it?
That is what I am seeing, and took forgranted until I try to create the same effect from scratch on my other page.
Using max-width:832px ; instead of width:832px; as ronpat advised will do this without a media query.
Without a width set, the box width will be auto or 100% but will not go any bigger than 832px when the screen gets big. max-width can also be used in conjunction with width to set the width when the screen is narrow. Eg:
.box {
max-width:832px;
width:95%;
}
will always give you a little background on the edge around the box when the screen is smaller than 832px. But it still won’t go bigger than 832px on the big screen. This is better than adding unnecessary media queries, try to keep them to a minimum by using fluid css like this.
