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

How to Fix Common Premium Blog for Elementor Responsive Display Issues

13 threads Sep 9, 2025 Plugin → Premium addons for elementor

Content

Many users of the Premium Addons for Elementor Blog widget encounter challenges when trying to achieve a consistent and visually appealing layout across desktop, tablet, and mobile devices. This guide covers the most common responsive display problems and provides clear, actionable solutions.

Common Responsive Issues and Their Solutions

1. Image and Content Layout Changes on Mobile

Problem: The blog layout shifts on mobile, often stacking the image on top of the content instead of keeping them side-by-side, or vice versa.

Solution: The Premium Blog widget uses responsive controls built into Elementor. Navigate to the widget's settings and use the responsive view icons (desktop, tablet, mobile) at the bottom of the panel to adjust settings for each device type. Check the 'Layout' and 'Columns' settings specifically for each device.

2. Controlling Image Size and Fit

Problem: Featured images appear distorted, are cropped strangely, or do not fill their container on mobile, leaving unwanted white space.

Solution: In the widget settings, go to the Content tab > Featured Image section. Locate the 'Thumbnail Fit' option and ensure it is set to 'Cover' for all devices (desktop, tablet, mobile). This often resolves issues with images not filling the available space. For more granular control, use the responsive views to set the 'Image Size' for each device.

3. Adjusting Padding and Spacing for Different Devices

Problem: Padding or content spacing looks correct on desktop but is misaligned or inconsistent on mobile devices.

Solution: Padding and other spacing options are fully responsive. In the widget settings, go to the Style tab and find the relevant section (e.g., 'Content Box'). Click the responsive view icon for mobile and adjust the padding values until the layout appears as desired. Always remember to configure these settings for each device type individually.

4. Hiding Elements on Specific Devices with CSS

Problem: You want to hide certain elements, like post excerpts or author bios, only on mobile to simplify the layout.

Solution: Use custom CSS with media queries. Add the following code to the widget's Advanced tab > Custom CSS field, replacing .element-class with the appropriate CSS class for the element you wish to hide.

/* Hides element on mobile devices */
@media (max-width: 767px) {
    .element-class {
        display: none !important;
    }
}

5. Customizing Author Avatar Size Responsively

Problem: The author's avatar is too large or too small on different screen sizes.

Solution: This requires custom CSS with media queries targeting different screen sizes. Add code like the following to the widget's Advanced tab > Custom CSS field.

/* Mobile Devices */
@media (max-width: 767px) {
    .premium-blog-author-thumbnail img {
        width: 40px !important;
    }
}

/* Tablet Devices */
@media (max-width: 1024px) {
    .premium-blog-author-thumbnail img {
        width: 50px !important;
    }
}

/* Large Devices */
@media (min-width: 1025px) {
    .premium-blog-author-thumbnail img {
        width: 60px !important;
    }
}

General Troubleshooting Tips

  • Clear Caches: After making changes, always clear any site, browser, or CDN caches to see the results immediately.
  • CSS Conflicts: Custom CSS from your theme or other plugins can sometimes override the widget's styles. The !important rule in CSS can help overcome this, but use it sparingly.
  • Provide a Link: If you need further help from the community, sharing a link to the page where the issue is visible is the fastest way for others to diagnose the problem.

By methodically working through these device-specific settings and using targeted CSS, you can gain precise control over how your Premium Blog widget appears on any screen.

Related Support Threads Support