If you make the view port sorta small so u get a scrollbar and then scroll all the way to the right, you'll see something like this
some of this is due to the lack of min-width and some is doe to the fact that certain wrappers have left/right padding while their content or inner-wrapper have a fixed 960px width
so I added some min-widths and overrode some widths to 960 minus left/right padding on it's wrapper to keep them from sticking out
I'll fix this for IE6 as well (where width is interpretted as min-width) as soon as I fix my IE6s
| Comment | File | Size | Author |
|---|---|---|---|
| #10 | bartik-min-widths.patch | 1.13 KB | seutje |
| #10 | bartik-widths.png | 32.91 KB | seutje |
| #10 | bartik-widths-after.png | 34.48 KB | seutje |
| #8 | bartik-wdiths.patch | 1002 bytes | seutje |
| #7 | more-fix-tiny-windows.patch | 417 bytes | jensimmons |
Comments
Comment #1
seutje commentedadjusting title, need coffee :x
Comment #2
jensimmons commentedI'm changing the title to make it about the larger problem (not just the solution). When I was at DrupalCon, and dropped into a session about D7 module development, they had Bartik on the screen for their D7 demo site. (Yeah!) And it was all mess up (boo) because the projector was old and low resolution.... and the browser window had to be made really small.
Let's make Bartik work for situations like that!
Comment #3
Jeff Burnz commentedSeeking a couple of definitions here:
How small is small?
800x600, 640x480, 320x480 (iPhone)
What would we define as working?
Comment #4
jensimmons commentedI rerolled this patch, taking out the CSS that re-jiggers the layout of the footer and navigation. This just includes code for fixing the layout when the browser window is smaller than 960px.
re #3: I don't think it matters how small — just that the window is narrower than the site layout, i.e. less than 960px.
Comment #5
jensimmons commentedSomething still isn't working here.
Comment #6
seutje commented#footer-wrapper has 20px left/right padding
960 + 20 + 20 = 1000px effective min-width
Comment #7
jensimmons commentedI adjusted the #footer-wrapper padding.
Committed this patch:
Well, that patch is a mess, but I committed the work in it, changing the padding from 20px to 5px. Which makes the fotter column blocks line up with the sidebars better. (Has a total of 15px between edge of block and browser window.
Still doesn't work quite right.
Comment #8
seutje commentedthat's not a very useful diff format to look at, but I did a fresh checkout
I don't rly get why there's a width and a min-width on the same element when both are in px
how's this?
min-width on the body (width in the IE6.css coz it doesn't support min-width and interprets width as min-width), allowing the nested elements to go all block-level while being restrained by the body
u changed the padding to 5px each side (which adds up to 10px on the total width), but the child has a width of 940px and a min-width of 920px... 940 would leave a 10px gap (or 5 at each side) and 920 would leave a 30px gap (15 on each side) so I changed that to just a width of 950px
sorta untested though
Comment #9
jensimmons commentedI'm saying good enough.
Comment #10
seutje commentedyour reply and status-change made me assume the issue was fixed but it persists and looks like a new issue was introduced:
#navigation resides with #header, so
#header div.sectionalready also targets#navigation div.sectionthis causes the inner wrapper to be forced to a width greater than it's outer wrapper (due to the padding) so I reset the width on
#navigation div.sectionto autoattached patch and before&after screenshots (viewport width about 600px, using screengrab!)
Comment #11
seutje commentedComment #12
seutje commentedguess I need to change the project as well
Comment #13
seutje commented#10: bartik-min-widths.patch queued for re-testing.
Comment #14
seutje commented#10: bartik-min-widths.patch queued for re-testing.
Comment #15
Jeff Burnz commentedWe need to look at this again soon, there are a couple of patches floating about with regards to widths and section divs, been good if we could coordinate on these and get in one patch that fixes the whole mess.
Comment #16
Jeff Burnz commentedThis should probably wait until #896956: Regression: Featured region expands to full width has gone in, somewhere in there the section DIV got nuked and we need it back :/
Comment #17
tim.plunkettI'm marking this as a duplicate of #950986: #main-wrapper min-height causes footer not to show without scrolling, but a lot of the relevant code was removed anyway.