I have 4 social icons at the top, centered. BUT, 3 are actually social icons and the one on the far right is a picture link, because RSD doesn't have a social icon for mail. So that one on the far right just won't behave at the various breakpoints. It's fine in full screen, but as I get smaller, the 3 to the left all move together and the one on the right just does its own thing. I can't seem to place it correctly so that it looks good. Is there a way for me to select all 4 elements and have them move together?

Here's the page I'm talking about (most links don't work, since this is only a temporary server).

http://tanyasolomon.coffeecup.com/site/index.html

Not sure why the far right icon is out of place on the server. Looks perfectly fine on RSD. Hmmm...

Thanks!
T.

Hi Tanya, have you tried adding "display:flex" to the container?

How would I do that? I see it under "Position". Is that right? I just clicked on it and it moved everything to the left and pushed that last one way up. Do I just re-adjust it from there? What does that do?

It appears that that errant icon is styled differently. It looks like the generic social icons are styled under their own class, and that mail icon is under a picture class.

I suggest this. Replace the mail icon with a generic social icon, and for the source, use the mail icon in your resources. I did that and I can get them to all line up.

I found your problem. I used Firefox and the Developer tool Inspector.
That right most icon was styled as a different class than the other social icons. It was a picture/image, and the irocs were styled differently in another class. And this was the styling (or part of)


See the bold? You have that element an absolute position 20 px below its ancestor. Change it to 0. Or better yet, redo it as you did the other icons, so when/if you change the other icons, you can change the class just once and they will all change together. Actually, you should be able to go to the element tab, delete the class and type in the name of the other ones, without tocuhing the rest of the panel (I believe, test that on something first - I am still in trial and have not done that yet)

I don't know why it appears in RSD correctly. It appears errant in all my browsers. I can use the Inspector tool and change the styles on the fly and see the result, and removing that bottom property puts it back in line.

For a social icon, keep it as generic. In the Source option right above the Style section, drop down to locan icon or online icon and use whtever graphic you want. You will need an appropriately sized graphic though. It will work like a social icon then, which is good, if gives you the flexibility and makes sure all social icons can be styled together in one class.

Actually, CC does include them.
Try this - open up the theme Bahia. Scroll all the way down. All those icons - come from CC, except they are not social icons, they are FONT ICONS. You add them from the element tab of the control panel. They are also "Glyphs." They are considered text, and you style them as such. So you should set their position as inline to solve some sizing issues. In elements under the paragraph, go to font icon, and drop down to font icon link. There are a few hundred to choose from a drop down. You can set the color and background, and the size through the typography section. There is an issue, with with CC or the fonts themselves in this pack, is that someone the font will extend past what the background will cover. So leave the background untouched because these icons have a transparent background so you don;t really have to fiddle with its background style, just its color and size.

What's nice about this - is - it has a mail icon. You can easily swap and resize/recolor them. Use these instead. if they are going to be used as a typical hyperlink. For example, the social icon for Facebook has some special attributes to follow and share.

Changing that "20" to "0" makes it look like it's way too low on RSD, however on the browser it looks fine. That's probably the way to go. I tried changing the class to the others (social icon) but it moved it to the left and it's still separate from the others. There was a huge gap between it and the rest. Argh.

So for now, I will just change that number to zero and even though it looks funny on RSD, I'll leave it since it looks ok on a browser. BUT...still having a problem when making the screen smaller for mobile devices. Changing the class did not help it to move along with the others when resizing.

Ok. I changed them over to the "glyphs". They move well. But I don't especially like the icons for them. Do wish I could replace them with my own social icon graphics.

You can use any graphic you want, you just won't have the ease of use of inserting pre-made Glyphs. The Glyphs are nice, because they are like fonts, can scale to any size, and remain a very small file size. For the social network services, I believe the induced glyphs are the currently used icons.

Also, explore the Flex positioning options as someone mentioned. I am not familiar with all of it, so I just don't use it much, but I am now starting to learn it. And when I am using it, I find its great. Go through the flex tutorials, and do this - its looks stupid, but you do learn it. flexboxfroggy. I believe in theory, you can create a container, or column, then in that container, using flex positioning, set orders for each icon, spread them out, center them, move them right, or left. RSD now includes an article/tutorial on flex positioning that one can open up with a new document, under themes. Look for something on the net too that is really really basic for a couple of items, and it should apply to those icons.

Post your file.

If you do post it, or post elements from it - I will make it my personal challenge to get a flex box working for you so it appears normally in RSD. I will want to do the same thing eventually, and I will then keep the file as a reference.