I’m not a CSS ninja by any means however I’m not new to web development by any means. With that being said, I’m failing miserably at trying to take a section of a previous developers existing code and make it fully responsive.
(WARNING – Completely Irrelevant)
Quick back-story: I have taken an existing site and completely re-developed it using a responsive jquery bg image carousel and implemented image maps (yes 1990’s-ish, but it gets the job done), and found another jquery plug-in that auto resizes the image maps based on the devices resolution .
My issue comes into play with the “social media” bg image and icons that overlap the bg image (see code: .navcon, .lexnav, .lex_social). This is all wrapped in div’s and works great on a modern browser (desktop/laptop) but when you resize the window or load it up on a tablet or mobile device (iphone or android) the “social media” section (divs and images) stay huge and don’t resize based on the users resolution like the background and image map(s) do.
Below is the code, any help with getting this CSS to be fully responsive would be GREATLY APPRECIATED!
(Only Posted Relevant HTML/CSS – Can Provide Entire Code If Need Be)
http://codepen.io/baytes/pen/zraNXo
Thanks,
Brad
