Reply To: CSS slide down menu … Adjusting to viewport sizes

[bbsemail]

Thanks for the help. Not closing the <header> tag was just sloppy! Yes, Bootstrap provides useful features and the grid layout looks interesting. However, the Bootstarp grids I’ve seen just break to multiple lines as viewport size changes.

I’d like to shrink the columns, remove padding, shrink divs(containers), adjust font sizes, rearrange divs etc to retain the original layout until window size shrinks below some point at which I’d like to go to multi line. The home page is the “problem child”. at viewport widths > 800px I want the announcements on the left below the logo with the <nav bar right of the announcements and above the pictures. As viewport size shrinks, I want to put the <nav bar full width below the logo, then display the pictures full width with the Happenings / announcements below that. Putting the <footer> and it’s info at the bottom. Bootstrap and it’s css make for great image resizing as viewport dimensions change and offers other nice features, but I don’t see how to get grids to do what I want.

Can this be done with Bootstrap, or does it just break the “containers” to the next row?

In reality, the dev site (assuming I don’t have too much sloppy code uploaded for testing) seems to lay out fine and adjust to changing viewport sizes on desktops fairly gracefully. Testing on mobiles also lays out ok on IPhone and Galaxy, but not on LG phones. The LGs are an odd issue, if I put the viewport on my desktop at the width my testers tell me their LG is, the page lays out fine. But, the dev Site doesn’t lay out fine on the actual devices.

Again, thanks for the help, UI is clearly not my strong point.
(wow, I’m long-winded)