Make this image 100% width

[demonboy]

On this page - https://followtheboat.com/refit/ - how do I make the first image stretch 100% across the page?

[rad]

Hi @demonboy,

Thanks for reaching out.

The image width is always limited to its original size to prevent stretching that can cause blurry quality. It will only respond if the image is larger than the container, like a smaller screen. But to override it, you’ll have to add this CSS to your image’s element CSS.

$el, $el img {
width: 100%;
max-width: 100%;
}

Hope this helps

[demonboy]

Yep, that’s that sorted.

On the same page, if you scroll down to the green bacakground you’ll see 50-odd posts that have been rendered as letterboxes. This is an older, Classic, insertion using a recent posts shortcode in Classic Raw Content. As you can see it does not render very well, it looks ugly.

Meanwhile on the homepage, https://followtheboat.com, you can see four recent posts rendered correctly. This is the Classic Recent Posts insertion. However this is restricted to 4 posts only. I’d like the page above to display all 50 posts in a similar fashion.

I’m guessing a simple styling element. I tried adding

x-recent-posts-img {width:150px;}

and

#post-35754 .x-recent-posts-img {width:140px;}

into the Classic Raw Content style box but it doesn’t have any effect.

I’d like the blog entries to be padded nicely too.

[ruenel]

Hello @demonboy,

The classic recent posts shortcode or recent posts element will only display up to 4 post items. If you want to display more, you will have to insert another set of the classic recent post shortcode or element and then utilize the offset option so that the post items will not display duplicate post item. For example;

[recent_posts count="4"]
[recent_posts count="4" offset="4"]
[recent_posts count="4" offset="8"]

This will display the 12 latest post items. If you are using the recent posts element, you should find the offset option in the element settings.

Hope this helps.

[demonboy]

OK, it’s a kind of work around although each line has the blog posts going from 4 to 1, 8 to 5 and so on. Unless I create a recent post for every blog post I guess this will have to do. Cheers!

[rad]

Hi @demonboy,

Yes, it’s currently limited to that setup but you could also try the grid bundled plugins for more advanced options.

Thanks!