Changing front page image size for mobile (tablet and phone)

Hi Devin,

Here is a CSS that you may try to replicate the sizes of the image in your reference site:

@media (max-width: 1024px) {
    article.post.type-post img.wp-post-image {
        width:100%;
    }

    article.post .wp-show-posts-image img {
        object-fit:cover !important;
        width:100%;
    }
}

You may refer to this with regards to adding CSS: https://docs.generatepress.com/article/adding-css/

Hope this helps! :)

Hmm, when I added the code in nothing changed. I currently have it in now, let me know if you can spot it on your end.

I edited the CSS here:
https://generatepress.com/forums/topic/changing-front-page-image-size-for-mobile-tablet-and-phone/#post-2128521

Please make sure future WPSP related questions are asked here:
https://wordpress.org/support/plugin/wp-show-posts/

I have a support ticket open over there now. I assumed that WPSP required separate support after my last inquiry regarding an issue I had with it so I figured that issue wouldn't be addressed, but I'll keep that in mind :)

I apologize if I didn't clarify enough but I was referring to the image sizes for the content underneath the featured articles section. That code did the trick for readjusting my WSPS images on mobile but for tablet they're still the same size. Since the code has already been created, although WSPS has its own separate support, would it be possible to add in the correct sizing for tablet as well, or should I go over to WPSP support?

In comparison to the reference site, I'm also noticing that the WPSP images are still very large in landscape mode on mobile as well. I'll link the reference site down below again. In addition to that, I'll need code for adjusting the content below the WSPS as well, which is what I was originally inquiring about. I've clicked through the customizer but couldn't find anything to change image size for mobile specifically. If I've missed that setting, please let me know.

Hi Devin,

You can modify the current code to something like this:

@media (max-width: 1024px) {
    article.post.type-post img.wp-post-image {
        width:100%;
    }

    article.post .wp-show-posts-image img {
        object-fit:cover !important;
        width:100%;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    section.wp-show-posts > article.wp-show-posts-single {
    width:100%
    }
}

This code should work for your reference site as well. You'll just need to remove the spacing you set.:)

Kindly submit WPSP related tickets to https://wordpress.org/support/plugin/wp-show-posts/ in the future. :)

Hope this helps! :)

When I put the code in the WPSP images became even larger in landscape mode and the content images became very slim. I didn't see any changes on tablet. As far as the WPSP images go, I'll head over to WPSP support. The WPSP images look great in portrait mode but in landscape they're still very large.

Here, I modified the code so that it would apply to the main content, and I added a media query to apply it to landscape view as well.

@media (max-width: 1024px), (max-width: 1024px) and (orientation : landscape) {
    article.post.type-post img.wp-post-image {
        width:100%;
    }

    article.post .wp-show-posts-image img {
        object-fit:cover !important;
        width:100%;
    }

    section.wp-show-posts > article.wp-show-posts-single {
    width:100%
    }

    #primary.content-area article{
        width: 100%;
    }

    .site-content{
        display:flex;
        flex-direction:column;
    }
    #content.site-content>*{
        width: 100%;
    }

    .content-area .site-main{
        margin:0;
    }
}

Hope this helps! :)

This time the WPSP posts were very large on tablet when in portrait mode and the content images below the "all articles" text for desktop, mobile, and tablet were still unchanged. I could try to get the dimensions of the content images for mobile in portrait mode but I'm not sure if I'll be able to for landscape. I have a support ticket open in the WPSP forum for further assistance with getting the image sizes correct for both modes across both mobile and tablet devices. Is there any way to get the exact dimension sizes from the reference site for both portrait and landscape modes for just the content images? I have support WPSP support working on the WPSP posts.

Sorry, I misunderstood. I thought you wanted to make the images spread out side to side as well.

In any case, with the same aspect ratio, the sizes of the images in the reference site can be replicated.

The aspect making the reference site’s article images being a bit smaller on tablet is because of the spacing.

Specifically, the article has a padding of 20px.

One way to add spacing for this is through Appearance > Customize > Layout > Container > Separating Space: https://share.getcloudapp.com/jkum5gdr

Another way to replicate this template is through a Content Template Block Element.

Kindly see: https://docs.generatepress.com/article/block-element-content-template/

Through this, you can modify the styling of the articles to your liking.

Hope this helps! :)

No worries. I didn’t mean to say desktop, btw. The image sizes for desktop are fine. So I’ll be able to achieve what’s in the screenshot by spacing? The images on the reference site are significantly smaller than mine, especially in landscape mode. More so on tablet than mobile. Both images attached are screenshots from my iPad.

Yes, there is a left margin making the image larger. To test, you can try this CSS for tablet and desktop:

@media (min-width: 769px) {
    div.inside-article .post-image img {
        width:100%;
        height:auto;
    }

    div.inside-article .post-image {
        margin-left:0;
    }
}

You can use this code or create a Content Template or try the customizer settings. This would depend on your preference.

Ideally, creating a Content Template or using Customizer settings would be the most ideal if you’re not really keen to coding and you want something more scalable and easily editable.

Hope this helps! :)

Thanks! I tried the code and it looked like that did the trick for tablet but for mobile the dimensions were still the same. I took the code out and went to my container settings to see if I could achieve the same look without it but it looks like my separating space was already set to 20 px. I've attached a screenshot of how my settings looked. The left padding at the bottom is so that my text aligns with the images. When I set it to 0, just to see what it would do, the images were still large. Are there any other changes that need to be made besides that?

I see. Can you try removing the code I provided and check these settings on Appearance > Customize > Layout > Blog?:

https://share.getcloudapp.com/yAukOmoe

Specifically, try turning on Display padding around images and modifying the media attachment size.

Kindly let us know how it goes. :)

Looks like that helped a little bit with displaying the padding on tablet but the image sizes remained the same for not only tablet but mobile as well. In both landscape and portrait mode. It also misaligned the the "all articles" text with the content images on desktop 🤔 I’ll put in code if I absolutely have to, I’m just worried about my site speed.