How to lineup social media icons across on a Tumblr blog

I managed to successfully integrate the like and tweet buttons into my blog, but I'm struggling with aligning them horizontally after each post. My goal is to position the tweet button just to the left of the facebook like button for a cleaner layout. In the future, I plan to incorporate the G+ button as well.

You can find my blog at www.thoughtsrandom.com

Any assistance on this matter would be highly appreciated.

Below is the code snippet I've inserted after {/block:PostNotes}

<div id="fb-root"></div>

<script>(function(d){

var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}

js = d.createElement('script'); js.id = id; js.async = true;

js.src = "//connect.facebook.net/en_US/all.js#appId=236186013100076&xfbml=1";

d.getElementsByTagName('head')[0].appendChild(js);

}(document));</script>

<div class="fb-like" data-href="{permalink}" data-send="true" data-width="450" data-show-faces="true"></div>

<a href="https://twitter.com/share" class="twitter-share-button" data-via="nhuntzinger">Tweet</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0];if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src="//platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

I am experiencing issues with the ng-dropdown-multiselect library and it is not functioning

Check out this awesome library for creating dropdown menus using angularjs and twitter-bootstrap-3 at: . I am trying to implement the examples provided. In my html, I have: <div ng-dropdown-multiselect="" options="stringData" selected-model="stringMod ...

Designing a patterned rectangle filled with stylish text

I am relatively new to the world of HTML and CSS, and I am encountering a specific challenge with CSS. My goal is to design a section that looks like this: ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- ---Image--- --Text-- The ma ...

Adjust the background to scroll to the bottom of the image first and then change it to be fixed

Here is the code I have written: body{ margin:0; padding:0; line-height: 1.5em; background-image: url(http://fehlbelichtet.stefanwensing.de/wp-content/uploads/sites/6/2016/04/alte-strasse-endlos.jpg); background-repeat:no-repeat; background-attachment: ...

Is it possible to cache an html page and display it on the current page when reloading?

I have been attempting to design a webpage with links in a table that trigger modals when clicked. These links are added dynamically using Jquery. $("table").append('<tr><td><a href="#exampleModal" data-bs-t ...

Ways to adjust the number of columns in a div using Bootstrap for varying screen sizes of larger devices

I am new to coding and exploring html, css, and bootstrap. Is it possible to assign varying numbers of columns to a div based on different resolution ranges for larger devices? Specifically looking at the "lg" range which covers laptops and desktops with ...

Adjust CKEditor's height within Vue.js

I recently began experimenting with integrating ckeditor5 into a Vue.js project. However, I encountered an issue where I couldn't manually adjust its height. Below is the code snippet I used - could you please review it and let me know if there are an ...

CSS mismatch detected between production and development modes

Currently, I am utilizing the Vuetify framework coupled with custom CSS for a project developed using a webpack template. During development mode, my custom CSS modifications are successfully applied to HTML elements; however, in Production mode, these cha ...

The scrollIntoView function is not functioning as expected

Having an issue with my function called scrollIntoView. It just refuses to work :( Take a look at the code below: HTML <section class="page_mission"> <div class="page_mission_text"> <div class="scroll-animations"> <di ...

Create a Grid-Item-List with a custom arrangement, utilizing techniques like flex-box to achieve the desired layout

Struggling to create a unique grid-list that looks great on both desktop and mobile devices. Any tips or solutions would be greatly appreciated! I need a list (left image) with a special layout, which can be achieved through nested grids. However, I want ...

Spacing between hidden checkboxes and their labels

I've customized some checkboxes to resemble a select dropdown by hiding the input and using only the label as the visible element. However, I'm struggling to add margin between the elements, which seems to work only when the checkbox is visible. ...

Issues within html language

The formatting of this table is causing issues with printing <tr height="95%"> <td width="100%"> <div id="placeSchedule"> <table bgcolor="red" width="100%" height="100%" border="1"> <tr> < ...

HTML5 document type declarations

After switching my site's doctype from XHTML to HTML5, I have made the following changes: I currently have: <!DOCTYPE html> <html lang="en-GB" xml:lang="en-GB" dir="ltr" xmlns="http://www.w3.org/1999/xhtml"> Now my question is, do I sti ...

What is the best way to display the complete text or wrap a menu item in an Angular Material menu?

Is it possible to display the full text of a menu item instead of automatically converting it to ellipses or breaking the word? I've tried various CSS methods without success. Any suggestions? https://i.stack.imgur.com/3l7gE.png #html code <mat-m ...

Hover effect that smoothly transitions to a background image appearing

I want to achieve a smooth fadeIn effect for the background image of a div. Currently, I have a function that displays the background image when hovering over the relevant div, but the transition is too abrupt. I would like it to fade in and out instead of ...

PHP is causing disruptions to HTML

Every time PHP code is present in my file, the page appears blank and upon checking the source code, there are no tags visible on the page. However, once I remove the PHP code, the form displays correctly without any issues. <?php $title = $_POST[&apos ...

How to effectively use graph paper with both major and minor grids in the background?

Looking to create a 100px by 100px image in Inkscape with major lines every 100px and minor lines every 10px. This will help verify viewport size when used as a repeating background. What's the best approach for this? Thinking of using #888888 for ma ...

Steps to place a URL and Buttons over an existing header Image

1) I am working with a header JPEG image that is 996px wide and includes a square logo on the left side. My goal is to use only this square logo section and add an href tag so that when users hover over it, the cursor changes to a hand pointer and they are ...

Implementing an alert box upon redirect with PHP

This question is pretty straightforward. I have a form on my index.html page and PHP code to submit that form to an external URL, then redirect back to the index: <?php Echo "<style>body{background:#3e4744}</style>"; Echo "<style>h2{ ...

Is there a way to achieve a transparent background while animating the second text?

I am seeking to create a unique typography animation that involves animating the second text, which is colored and consists of multiple text elements to animate. The animation should showcase each text element appearing and disappearing one after the other ...

Tips on updating the highlighted color of the item currently selected in NavBarDropdown using react-bootstrap

I've been utilizing the react-bootstrap NavDropDown component from this source. Although I initially set it up correctly, I'm struggling to customize the background color of the navdropdow-items when they are in their normal or active (selected) ...