CSS slide down menu … Adjusting to viewport sizes

[bbsemail]

I’m having issues with a slide down menu. I got them working for the most part on all pages but the home page which has a slightly different layout;
http://dev.hcca.org/index.php

On smaller viewports I was trying for the logo, then the menu bar, then the picture slide show, then the HCCA Happenings and the announcements.

All of a sudden moving the divs around to accommodate different resolutions isn’t working. Any idea why?

Also, on all pages my menus are now “messy” when they role back up. It’s like the background image roles up first and then the text. Again, any idea how to fix this?

list-style-type: none; doesn’t seem to be turning “off” the list marker either. Do I have this in the wrong spot? It was working.

Thanks for helping me learn!

[Jerba]

I’m having some trouble deciphering the markup of your page, it all seems a little bit confused. I’ll try and point out a few things which I noticed.

• You seem to be containing the entire website in a <header> element which is a little odd.

• The UL element containing your navigation elements, is the full width of the header, 0px high and positioned no where near your actual li child elements. (see below)

Despite this, I notice that you’re using twitter bootstrap, this framework has some incredibly useful grid based layout functionality which you could very easily utilise here to generally improve the layout mechanics of your website as a whole for all devices.

Here’s the official documentation on using bootstrap grids:
http://getbootstrap.com/css/#grid

and here’s a video explaining how to use the grid system which may be much more useful:
https://www.youtube.com/watch?v=c5xVxSFoyQw

I hope this was helpful.

[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)

[Author]

Posts