Forums

The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS lining up icons issue

  • This topic is empty.
Viewing 7 posts - 1 through 7 (of 7 total)
  • Author
    Posts
  • #38595
    tobeeornot
    Member

    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.

    #104661
    Senff
    Participant

    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.

    #104663
    tobeeornot
    Member

    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?

    #104664
    Senff
    Participant

    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.

    #104666
    tobeeornot
    Member

    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.

    #104667
    tobeeornot
    Member

    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?

    #104672
    Senff
    Participant

    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)
  • The forum ‘CSS’ is closed to new topics and replies.