Social Icon 'Group'

User 2098492 Photo


Registered User
60 posts

What's the best way to keep my social icons 'together?' I've got five of them to the right of my menu bar. The menu and social icons each have their own column in the same row. Adjusting the spans at the breakpoints gets me close, but there's a point between the breaks that the icons get 'squeezed' and start to wrap.

I'd like them to behave as a fixed block. See work-in-progress here:
http://www.datacad.com/demo/new_index.html
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

I've seen a lot of them put in a ul .
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2098492 Photo


Registered User
60 posts

Clever. Seems to work in a vertical orientation. Can the list be made to repeat horizontally?
User 2098492 Photo


Registered User
60 posts

I think I got it. Float: Left, Min-width 24px.
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

Awesome! You got it.;)
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2098492 Photo


Registered User
60 posts

Looks like I'll have to add blank spaces to increase the size of the link area?
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

This would be for your item 1 item.
.list-item-text-1 {
width: 24px;
height: 24px;
display: block;
}

I would add a class to those links so you only have to do it once.
.list-items {
width: 24px;
height: 24px;
display: block;
}

<a title="" href="https://www.facebook.com/datacad" class="list-item-text-1 list-items "> </a>
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2098492 Photo


Registered User
60 posts

Will I have to make these edits manually? They do not appear to be accessible via the RSD program interface.
User 187934 Photo


Senior Advisor
20,181 posts
Online Now

I would think it could be done in the program but there's this way.
Make a custom.css sheet and add the link to it in the head your pages.
I can't hear what I'm looking at.
It's easy to overlook something you're not looking for.

This is a site I built for my work.(RSD)
http://esmansgreenhouse.com
This is a site I built for use in my job.(HTML Editor)
https://pestlogbook.com
This is my personal site used for testing and as an easy way to share photos.(RLM imported to RSD)
https://ericrohloff.com
User 2088758 Photo


Senior Advisor
3,086 posts

Eric Rohloff wrote:
I would think it could be done in the program but there's this way.
Make a custom.css sheet and add the link to it in the head your pages.


I usually add this stylesheet too... There are still some things that RSD cannot do, not many, but still a little. :cool:

My guess would be eventually you will not need an external stylesheet.
Taking over the world one website at a time!

Steve Kolish
www.misterwebguy.com

YouTube Channel:
https://www.youtube.com/channel/UCL8qVv … ttneYaMSJA

Have something to add? We’d love to hear it!
You must have an account to participate. Please Sign In Here, then join the conversation.