How do I get social media icons to stay fixed?

Question

I have centered my social media icons in the footer of my responsive site. As the web page gets smaller, the icons move together and overlap before the responsive break point. How do I get the icons to stay a fixed distance apart and stay in the middle?

Likewise, I am finding that the header text adjustments in mobile view do not seem to be making their way from the software to the template.

Finally, my horizontal menu starts to overlap my logo before the responsive break. How do I adjust for that?

Is there yet any way to adjust the responsive break points?

Answer 1

Hey,
Thanks for letting us know about the situation. We'd love to help you with this.

You have to manually set the position of social icons, header text, logo for desktop view, tablet view, and mobile view. if you set the position only in desktop view then it automatically takes values as it is and shows accordingly in other responses also.
TemplateToaster follows the Bootstrap standard responsive breakpoints.

Comments

Perhaps I wasn't clear. I have 3 responsive points, not the 5 of Bootstrap 4.

1) I have made changes to the mobile view in the header and they are not coming out correctly in the exported template.
2) I centered the social media icons in all 3 views, but when the browser window gets smaller the social media icons move closer together and completely overlap before the tablet break point. They really need to be able to be in a container so the container can remain centered, but the icons remain evenly spaced.
3) Likewise, I have a menu above header layout. As the browser window gets smaller, the menu moves under the logo before the tablet break point. Without break point controls, how do I prevent this?