Back to Community
Home / Community / Plugin → Premium addons for elementor

How to Fix the 'Read More' Button Position in Premium Addons for Elementor's Blog Widget

39 threads Sep 16, 2025 Plugin → Premium addons for elementor

Content

A common issue faced by users of the Premium Addons for Elementor Blog widget is a 'Read More' button that jumps around instead of staying fixed at the bottom of each post card. This typically happens when post excerpts are of varying lengths, causing the button's position to shift and creating an uneven, unprofessional look for your blog layout.

Fortunately, there are a couple of reliable methods to solve this problem and achieve a clean, consistent design.

Method 1: Using the Built-in Equal Height Feature

The Premium Addons for Elementor team has integrated an 'Equal Height' feature specifically for this purpose. Here’s how to use it:

  1. Edit your page with Elementor and select the Premium Blog widget.
  2. Navigate to the widget's Layout tab.
  3. Find the Equal Height option and enable it.
  4. In the Apply On dropdown, select Custom Selector.
  5. In the Selectors field that appears, copy and paste the following CSS classes: .premium-blog-inner-container, .premium-blog-post-content
  6. Save your changes and update the page.

This method tells the widget to apply an equal height to the main content containers, which should force the 'Read More' button to align at the bottom consistently across all posts.

Method 2: Adding Custom CSS

If the first method does not work for your specific setup, you can use custom CSS. This solution uses absolute positioning to lock the button to the bottom of its container.

  1. In your WordPress dashboard, go to Appearance > Customize > Additional CSS.
  2. Copy and paste the following CSS code into the provided box. You may need to adjust the height value (350px in this example) to match the desired height of your content boxes.
.premium-blog-content-wrapper-inner{
  min-height: 100% !important;
  position: relative !important;
}

.premium-blog-excerpt-link-wrap {
  position: absolute !important;
  bottom: 0px !important;
}

.premium-blog-content-wrapper {
  height: 350px !important;
}
  1. Publish the changes.

This CSS ensures the content wrapper has a fixed height and that the 'Read More' link is absolutely positioned at the bottom of it.

Why This Problem Occurs

This behavior is not a bug but a natural result of how CSS flows content. By default, elements appear in the order they are in the HTML and will push subsequent content down. When one post excerpt is short and another is long, the button's position is directly affected. The solutions above override this default behavior to create a more controlled, uniform layout.

If you continue to experience issues, it is often helpful to share a link to the page in question on community forums, as other users or developers may be able to provide CSS tailored to your specific theme and widget settings.

Related Support Threads Support