Hi All - I've been inactive on this list for quite some time due to a forced change in my job roles which all but removed me from building websites. So, I'm rather rusty on some of this stuff and never really got up to speed on responsive/mobile first techniques. Now, however, I've been tasked with moving some logos from the footer of a site up to the header area. The site is a bootstrap-based template site, customized in look by me. But now we're talking about changing functionality and structure a bit, and that's where the ol' skills are falling short.
The site, CSS and screenshots are here: http://route66festivalsgf.com/indexLogos.html http://route66festivalsgf.com/css/style.css (very bottom of sheet are my changes) http://route66festivalsgf.com/issues/tablet.png http://route66festivalsgf.com/issues/smallPhone.png http://route66festivalsgf.com/issues/tabletLargePhone.png http://route66festivalsgf.com/issues/largeTablet.png I've kinda got a so-so start and have a few screenshots to show the site at various widths. The "tablet" and "smallPhone" screenshots are acceptable, though I would tweak the logo placement just a bit on the smallPhone one. My dream layout for the phone would be http://route66festivalsgf.com/issues/phoneDreamLayout.jpg But the main issues right now are two: 1) the sponsor logos being completely out of place in the "largeTablet" view. I can't seem to isolate what is making the logos be BOTH offset and on two rows. Why aren't the logo images staying to the left, thus making room for all four? It's like something is pushing the first of the two images to the right, forcing the second one down. Despite using browser inspection tools and such I can't seem to see what is the cause of this. 2) dual rows and extra room in the "tabletLargePhone" view. For this size viewport I would really rather the logos all stay on one row and simply scale down a bit. I'm sure I'm probably approaching all of this wrong. :-) I had thought of using each logo image as a separate item, using display:inline-block to allow them to flow into place automatically. But that's not going too well either. For some reason, in the wider viewports after the main navigation becomes the 3-line icon, the logos won't stay on one line. At least one of them wants to drop down and form another row. http://route66festivalsgf.com/indexLogoBlocks.html Any insight as to approach or specifics would be greatly appreciated. Christopher Akins City of Springfield, MO ______________________________________________________________________ css-discuss [css-d@lists.css-discuss.org] http://www.css-discuss.org/mailman/listinfo/css-d List wiki/FAQ -- http://css-discuss.incutio.com/ List policies -- http://css-discuss.org/policies.html Supported by evolt.org -- http://www.evolt.org/help_support_evolt/
