Placement of "like" and "reblog" options within tumblr

Having issues with the button placement on my tumblr page. The Like button is in the correct position, but the Reblog button keeps appearing at the beginning of the post. On subsequent posts, it even extends outside the post block. Additionally, the text after the first post shifts to the left side. Any help to resolve this problem would be greatly appreciated.

  • Link to problematic blog: http://rkhmlvch.tumblr.com
  • Original code reference: https://github.com/xSOADx/The-Default-Network/blob/master/Theme%20code
  • Snippet containing necessary code:

<div id="buttons">{likebutton}</div>
<div id="buttons">{reblogbutton}</div>

  • Images for reference

Answer №1

If you have a specific element where you want to apply styles, it's best to use an ID. However, if you need to reuse styles across multiple elements, using a Class is more appropriate. I suggest updating your IDs to classes for better organization.

For example, change

<div id="post">...</div>
to
<div class="post">...</div>
, and do the same for
<div id="buttons">...</div>
.

Now back to your initial question. The first

<div id="post">...</div>
should be within <div id="wrapper">, just like the rest of them. Move all posts inside <div id="wrapper"> for consistency.

Regarding your buttons, switch from

<div id="buttons">...</div>
to
<div class="buttons">...</div>
, and apply CSS styles as follows:


.buttons { display: inline-block; margin: 5px; }

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

Using the class for jQuery validation as opposed to the name attribute

I am looking to implement form validation using the jquery validate plugin, but I am facing an issue with using the 'name' attribute in the html since it is also used by the server application. Specifically, I want to restrict the number of check ...

The height set to 100% is causing issues with the padding-bottom property

Currently, I have a setup that includes: A div with width set to 100% and height set to 100% An SVG element inside the div with default width and height of 100% My issue is that when applying padding to the div, the left, right, and top padding seem to w ...

Having trouble viewing the CSS menu on Internet Explorer 8? Could it be a potential JavaScript issue causing the problem?

Receiving complaints about the menu bar dysfunction in Internet Explorer 8 has left me bewildered. Despite working perfectly on all other browsers and earlier versions of IE, I cannot figure out what's wrong with the code. You can view the website at ...

Manage the application of CSS media queries using JavaScript

Is there a method to control which CSS media query a browser follows using JavaScript? As an example, let's say we have the following CSS: p { color: red; } @media (max-width: 320px) { p { color: blue; } } @media (max-width: 480px) { p { col ...

What is the best way to display multiple files in a vertical stack when choosing a file?

<div class="selected-file-container align-items-center justify-content-between d-none"> <div class="selected-file d-flex align-items-center"> <img id="selectedImage" class="hidden" src="&qu ...

Poor text display quality on Internet Explorer

Are there any solutions to improve font display on Internet Explorer for Windows? font-family: "Helvetica Neue",Helvetica,Arial,sans-serif; Check out this 100% crop comparison: Left: IE Right: FF ...

When utilizing ng-repeat and invoking the function in the HTML, the JSON array values fail to transfer to the HTML form

What I am trying to achieve: https://i.sstatic.net/hbdbC.jpg I am facing issues with getting the desired dynamic form output. The values are not being displayed and the data is not passing from the JavaScript file to the html form. I have even tried usin ...

Scrolling and hovering now triggers the fixed button to toggle class seamlessly

Currently, I am attempting to modify the class of a button on my website. The initial state of the button is wide, but as the user scrolls, it should shrink in size. When hovering over the shrunken button, it should expand back to its original width. Alt ...

Ways to adjust the size of a Primeng autocomplete with multiple selections?

I'm new to Angular and I'm attempting to adjust the width of a primeng auto complete component in order to fill the column of a table. I've already experimented with using style="width: 100%" but that approach hasn't yielded any result ...

jQuery's ability to load pages seamlessly is unmatched

My website is filled with images, and in order to speed up the loading time, I added a loading screen. Currently, it's a white overlay with the following CSS: #loader{ width: 100%; height: 100%; position: fixed; z-index: 9999999999999 ...

Dimensions in Material UI

As I embark on my journey with Material UI components for React, I am facing the challenge of integrating pre-styled components into my project. I have noticed that some components appear too large in my layout due to excessive padding and margins. Curren ...

Material UI allows for the creation of numbered lists with ease. This

<List> {instructionList.map((el) => ( <ListItem divider key={el.id}> {el.type === 'number' ? <React.Fragmen ...

"Optimizing the placement of a range slider for pricing options

As a beginner in HTML, CSS and JS, I recently faced the challenge of creating a price slider range on a website. However, I am struggling with repositioning it. After copying the code from this link, I noticed that the slider is positioned at the top of th ...

What is the best way to transform SASS into CSS?

Looking for an online tool to easily convert a few lines of SASS into pure CSS. Despite searching on Google, all the links I found talk about converting CSS to SASS. Below are the specific lines I need assistance in converting to CSS: =text-shadow($color ...

Designing a toggle button interface with Material UI

Looking to add a toggle button to my page. Here is an image of what I have in mind: https://i.sstatic.net/tiQAP.png Unable to find any material-ui component or API for this specific toggle button design. Considering building a custom toggle button with CS ...

The PrimeNg confirmDialog is updating my navbar with some modifications

Despite my navbar working well and being fully responsive, I encountered an issue where opening a confirm dialog in the background caused the navbar width to expand to 800px even though the screen width was 1480px, creating empty space on the right side, a ...

Ways to adjust the color of a navbar link according to the current page you are visiting?

I'm looking to implement a feature on my website where the area around the nav-link darkens when someone navigates to a certain page, making it easier for them to see which page they are currently on. I am working with Bootstrap v4.3.1 and Razor Pages ...

React Material Design Cards for Responsive Layouts

Hi there, I am currently navigating my way through Material Design and attempting to ensure that the cards section is responsive by utilizing media queries and flex. However, I have encountered an issue where only a portion of the image is displayed when t ...

Creating a new image by extracting a specific HTML div tag that contains an image and its layers

I currently have a div element that includes an image element along with multiple other div elements containing small text displayed above the image. I am looking to save the image along with its content to a new image file. Any suggestions or ideas are ...

Can you provide the keycodes for the numpad keys: "/" and "." specifically for the libraries I am utilizing or any other library that does not overlook them?

I've hit a roadblock with my Chrome Extension development. Despite using two different methods to add keyboard functionality, the keys "/" for divide and "." for decimal on the keypad are just not registering. I've attempted to tackle this issue ...