Posts Module Issues

Beaver Builder
1

Hello

On this web page:

o55perth.bike/test-home-page

I am using the Posts module for the Latest News. I can only set the Featured image to be above or besides the text. I would like the text to wrap beneath the image.

Also, for the content I have selected to show excerpts. Is there a way to restrict the length of the excerpt?

I am using the Dynamik Website Builder theme.

Thanks for any help!

Best wishes, Stuart

2

Hey Stuart,

Thanks for posting! Try using the CSS snippet below and see if it takes care of the text wrapping.

@media (min-width: 768px) {
    .fl-post-feed .fl-post-feed-image-beside .fl-post-feed-image {
        margin-bottom: 0px;
        margin-right: 10px;
    }
    .fl-post-feed .fl-post-feed-image-beside.fl-post-feed-has-image .fl-post-feed-content {
	margin-left: 0px;
    }
    .fl-post-feed .fl-post-feed-more {
        margin-top: 0px;
    }
}

As for the excerpt length, you can adjust it using a filter. Check the link below for more info.
https://codex.wordpress.org/Function_Reference/the_excerpt#Control_Excerpt_Length_using_Filters

Ben

3

Fantastic Ben - your support is, as always, spot on :slight_smile:

The only issue still to resolve is when the page displays on small devices. The featured image is automatically displayed above the text. Is this fixable?

Thanks, Stuart

4

Hey Stuart,

No worries at all! That’s actually part of the responsive design of our Post module. If you still want the image beside the text on mobile devices, try using the CSS snippet below.

@media (max-width: 767px) {
    .fl-post-feed .fl-post-feed-image-beside .fl-post-feed-image {
        float: left;
        width: 33% !important;
        margin-right: 10px;
        margin-bottom: 0px;
    }
}
5

Thanks Ben. Unfortunately the CSS makes no difference :frowning:

6

Hey Stuart,

Do you have a caching plugin? Try clearing its cache as well as the BB cache. If it still isn’t working, go ahead and send temp admin access so we can take a look. :slight_smile:

Ben

7

[Content Hidden]

8

Hey Stuart,

I took a peek at your site before logging in and it seems the styling is now there, i.e., the issue is fixed on mobile. :slight_smile:

Re column widths on mobile, they’re given a max-width of 400px, which is enough for a mobile device as most run on 320px. You can still use the CSS snippet below though to override that.

@media (max-width: 767px) {
    .fl-col-group .fl-col-small {
        max-width: 100%;
    }
}

Ben

9

Thanks again. The column width is only an issue on tablets in portrait mode.
Best wishes,
Stuart

10

Hey Stuart,

That might be caused by how we’ve set our default small responsive breakpoint to 768px, which is the width of most tablets. Try changing that to 767px under Tools > Edit Global Settings when inside the Page builder.

Ben

11

Yes - that fixed it :slight_smile:

Thanks again. Stuart

12

No worries! Have fun with BB! :slight_smile:

Ben