Is it possible to flex-shrink the social icons?

Hi Onur,

Any chance you can link us to the site in question?

You can use the private information field.
https://docs.generatepress.com/article/using-the-premium-support-forum/#private-information

Let me know :)

Sure.

Rest Assured Tutorial

Hi Onur,

any particular reason for the need for flex-shrink property?

If it's a to keep the icons in 1 row, I don't think flex-shrink alone would solve the issue because the icon size has a fixed size.

Can you explain a bit more on the desired behavior/styling?

Hi Elvin,

I just want to keep the social icons in one row inside the widget container. Any solution will be OK for me. I tried wrap but because of wrapping, it created some CLS problems and I reverted that option.

Thanks.

I just want to keep the social icons in one row inside the widget container. Any solution will be OK for me. I tried wrap but because of wrapping, it created some CLS problems and I reverted that option.

Consider these things:

Try reducing the padding first:

.lsi-social-icons li a {
    padding: 3px;
}

Also, try reducing the font icon size as well. You can set that on Appearance > Widgets.

I believe you have set it to 20px. Try using 16px or smaller.

as for flex shrink, you can do it with this CSS:

.lsi-social-icons li {
    flex: 0 1 auto;
}

But I don't think this will make a difference. LSI uses font icons instead of SVG. It's a pretty old plugin.

Before doing these and using the LSI plugin, do you suggest any other thing to show the social sites to the users? One other problem is my sidebars are loading later than the actual content for short content pages and because of that when I activated the WP Rocket's unused CSS option, I am having CLS problems.

If you have a better solution rather than the LSI plugin, I will be so much happy to hear. LSI is a very minimal plugin that I cannot also do too many variations on it.

Thanks,
Onur

I would recommend using Generateblocks plugin since you already have it installed. (The social icons in the site footer is added with GB)

You can directly add buttonsblock to the widget area like the screenshot below:
https://www.screencast.com/t/OTtYJAuo6

For more info: https://docs.generateblocks.com/article/buttons-overview/#icon

Hi Ying I did what you suggested and it worked awesomely! Thanks a lot.

I have one more question.

How can I make the search bar and search icon "horizontally fit the container" like the social buttons? Currently, the social icons based on Generate Blocks buttons are responsive and horizontally fitting. I want to make the search bar and the search icon similar.

Sample link: Rest Assured Tutorial

Give this CSS a try:

.widget_search .search-form {
    flex-wrap: wrap;
}
aside#search-8 .search-form > label {
    flex: 5 1 0;
    min-width: 100px;
}
aside#search-8 .search-form > button {
    flex: 1 1 0;
}

Feel free to change the min-width of the search field, it's the width that the button goes down to another row.

Let me know how it works :)

Yeap! It worked perfectly! Thanks a lot, Ying! :)

Sending a message to make the post as resolved.

You are welcome Onur :)