[Resolved] Social Share buttons only in post and fixed in sidebar

[Santa]

Hello! Could you please help and describe how to add social share icons (example: https://ruffledblog.com/bel-air-wedding-tropical-ombre/) that are showing only in posts and are fixed on left sidebar while scrolling? I assume it can be done with hooks, but as a total newbie, not exactly sure how to do it.

[David]

Hi there,

can you provide us with a link to the page so we can see the current setup and advise on the best way to do this. You can edit your original topic and use the Site URL field for privacy.

[Santa]

Hello! Added the site!

Wanted to ask few more things:

1. The title on mobile device is not fully responsive on small screens. How to change it? It is made with elements.
2. How to add left&right padding to the post text on tablet and mobile devices?
3. Is it possible to change the comments box size to smaller for mobile devices?

Thanks!

[David]

Hi there,

to deal with the other issues first.
On the post editor – you have the Layout > Page Builder Container set to contained. Set it to default then the padding for the desktop and mobile will respect the settings in the Customizer > Layout > Container.

The font size in the header element is controlled again by the Customizer > Typography > Headings. The H1 has a mobile setting.

Once the padding is in place we can take a look at the comments box.

For the social icons, which plugin are you using? You will need to be able to place it using a shortcode. Let me know. Then we can look at how to position it and make it sticky.

[Santa]

Hello!

Thank you for your solutions. Fixed everything!

I am using Lightweight Social Icons.

[David]

You will need to use a different plugin, Lightweight Social Icons only provides link icons not sharing. Choose one that allows you to add the icons using a shortcode. Then on your single post add the left hand sidebar and add the short code to the widget.

Once thats in place we can look at some CSS to arrange the layout and make the icons sticky.

[Santa]

Hi!
Thank you for the answer!
Did install the Social share plugin with shortcode option. (social pug) However can’t manage to add shortcode in the sidebar. I want to all posts have this option of sharing them. Please could you describe the right way to add the shortcode to all posts?

Thanks!

[David]

You should be able to add it as Widget in the Sidebar?
If not, add a Custom HTML Widget to left sidebar, and add the shortcode to that.

[Santa]

Changed the plugin to GP Social, and added their shortcode to left side. How to make them in vertical line and adjust sidebar background color, icon color as well as make them float and both sidebars to appear before comments in mobile? Is it possible to make left sidebar even smaller?

Thank you!

[David]

I can no longer access the site from the URL you provided? Can you edit the first topic and provide a working link.

[Santa]

Hi! The link is the same and is working. Just checked

[David]

Right, so change of plan…. remove the shortcode from the sidebar and disable the left sidebar. ( i am assuming you are not going to need for anything else ). Then:

1. Appearance > GeneratePress — > make sure the Elements module is activated
2. Appearance > Elements –> New Hook
2.1 Add the shortcode to the hook.
2.2 Select before_content hook
2.3 Check execute Shortcodes checkbox
2.4 Set Display Rules Location -> Posts > All posts

Once thats done i can work on the CSS

[Santa]

Hello! Thank you. Did it.

[David]

Can you check that you used the before_content hook?

[Santa]

Yes, now everything should be okey.

[Author]

Posts