Grow your CSS skills. Land your dream job.

CSS lining up icons issue

  • # June 20, 2012 at 4:49 am

    I’m trying to line up some social icons (in @font-face format which why they only appear as letters) beside the Connect h3 in the yellow box but I’m stuggling. Any help would be great.

    JsFiddle

    Screenshot from working locally

    EDIT: the font size of the icons has been reduced to 72px in the screenshot version.

    # June 20, 2012 at 10:01 am

    Can you give an image/visual of what it’s supposed to look like? Cause I’m not sure if you want the icons to line up with the higher “CONNECT” title, or if you want the “CONNECT” title to line up with the lower icons.

    # June 20, 2012 at 10:12 am

    Sure, no problem. Here is the finished image of the footer from the comp.

    I want it to line it up as so at full scale. But I am building my first responsive site and I want to bring the social media links down below the “connect” as I scale down to mobile. Would it be better that I use images?

    # June 20, 2012 at 10:36 am

    I’m not really sure why you made the text (that represents the icons) so large. But all in all, I would just use this type of code: http://jsfiddle.net/senff/XWNxv/

    On wider screens (the one at the top), the icons line up with the title.
    On smaller screens (the one at the bottom), the icons will wrap under the title.

    # June 20, 2012 at 11:51 am

    Hey Senff, thanks very much. I really like how you put that together. The reason why I used the text.icons so large is that they looked better on my desktop. Anyways, that really helped so thank you.

    # June 20, 2012 at 11:56 am

    I have one question, if I may. I know the mantra for responsive design is ‘mobile first’ but I wrote to Ethan Marcotte after reading his book and he said a good way to start is to design for desktop first and quarantine the sizes and you scale down. I took that to mean you can design a normal site for desktops, give it flexible grids, and start adding media queries as you scale down. Is that right? The reason why I ask is I notice with some responsive sites, mobile was definitely designed first and I wondered if it made much difference?

    # June 20, 2012 at 1:21 pm

    Depends on your audience and your design. For some designs it’s easier to start with a mobile design and then add/reposition things for desktop. For other designs it’s better to start with a desktop design and then remove/reposition things for mobile.

    Or you go the middle route and you design a generic thing first, then add/remove/reposition stuff for mobile sites, and add/remove/reposition stuff for desktop sites.

    I don’t think there’s a rule or law that says which device or screen size you have to target first.

Viewing 7 posts - 1 through 7 (of 7 total)

You must be logged in to reply to this topic.

*May or may not contain any actual "CSS" or "Tricks".