Stack featured image above title on mobile

Hey Michelle,

It looks like the featured images are set to align left (The Latest) and align right (Must-Reads). This causes them to float instead of stack…if you can remove that alignment it should correct this.

Let us know if you need anything else!

Hi Steven,

Thanks for the response and looking into this for me.

I’ve set them to align left and align right, as that’s how I want them to look on desktop. Is there a way to add CSS so they stack on mobile and keep this alignment on desktop?

Thanks again.

Best,

Michelle

Hey Michelle, this may need tweaked slightly, but hopefully this gets you close to what you’re looking for:

@media (max-width: 991px) {
  .wp-block-latest-posts__featured-image.alignright, .wp-block-latest-posts__featured-image.alignleft {
    float: none;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }
}

Let me know if not!

Hi Steven,

You saved me yet again! Thank you!

I’ve tried to make the images for these first 6 posts to be larger with:

@media (max-width: 791px) {
 .attachment-medium.size-medium.wp-post-image .alignwide {
        margin-left: -1rem;
        margin-right: -1rem;
        width: calc(100% + 2rem);
    }

and while in preview mode for mobile on my computer this works but when I actually view it on my phone it doesn’t change the size of the images. I’d like them to show up on mobile as the same size as the images under the “What to Buy” section.

What am I missing?

Thank you,

Michelle

Hi Michelle,

The What to Buy images aren’t full width on my phone either, so I’m not 100% sure whether you’re going for that same left aligned look, or a full width size. But it looks like the code you posted is targeting the “alignwide” class, instead of the “alignright” and “alignleft” classes that your top 6 images are using.

If you adjust that CSS to target the current classes and it does what you had intended, that’s great- if not, let me know which option you’re looking for (left aligned or full width) and I can write up some CSS for it.

One other little detail we might have to think through though is the Must-Reads section- those may be tough to match width on since they’re contained in a bordered section.

Hi Steven,

You’re right, the images are left aligned. Despite many attempts I wasn’t able to get the code to do anything with the images.

I would like all of the images to appear as full width on mobile. If you could help with the CSS that would be so helpful!

Thank you as always and I’m wishing you a lovely Thanksgiving!

Best,

Michelle

Gotcha! This CSS should work for both the The Latest and Must-Reads, although since one section is bordered it may need some tweaking:

@media (max-width: 480px) {
    .wp-block-latest-posts__featured-image a {
        width: 100%;
    }
    .wp-block-latest-posts__featured-image img {
        min-width:100%;
    }
}

Thanks so much, you too! ??

This is absolutely perfect! Many many thanks Steven for always finding the solution!!

Take care and thanks again,

Michelle

Great to hear that- thanks for letting me know! ??