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

To have a better understanding, can you take a screenshot of how it looks like from your end, and how you want it to look like?

Hope to hear from you soon! :)

With the display padding settings or without? Without, it looks like the screen shots I sent yesterday, but I’ll send them again. With the padding it looks the exact same, just with a tad bit of padding on the left. The code you gave me to correct it worked like a charm, but I wanted to see if I could achieve the same results without it. For mobile, with the code added in, the images still looked the same. I’ll see if I can get screenshots for mobile as well. The ones attached are only for tablet.

Screenshots for mobile. Unfortunately, I was unable to capture the size of the image in landscape mode for the reference site as the images in that mode are too high.

The screenshots for mobile aren’t showing anything.

In any case, if you set to “Display padding around images”, from my end, this is what it looks like: [hidden]

For mobile, if you go to Appearance > Customize > Layout > Container, you can try setting the left and right paddings to 0 for mobile.

Try not to set a size here as well: https://share.getcloudapp.com/NQux6Q60

Hope this helps! :)

Sorry about that, it's probably because I wasn't able to create the right link for them while on my phone. Displaying padding seems to pad the image a bit from the left side that makes everything look a little more desirable but the images are still very large in comparison to how it looks when the code is added in.

The way the images looked with the code were pretty much exactly what I'm looking for. I'll place it back in and have you take a look if you'd like. I'm also attaching the screenshots for mobile again.

As stated in the previous message, I was unable to get a good screenshot of how it looks in landscape mode for the reference site as the image was just too high. I apologize if the sizing is a bit large in comparison to how it would look on an actual phone, I had to transfer the screenshots over to my email to create the correct links.

Hi Devin,

The reference site has a content padding of 30px on all sides whereas your current site has this padding on mobile: [hidden]

Kindly set your padding in Appearance > Customize > Layout > Container to your preferred values on different views. :)

Hope this helps! :)

I just went ahead and put code back in to fix the image sizes on tablet. I'm not sure if the reference site has code, but considering that the image sizes on tablet closely replicate the image sizes on desktop I'm not sure how they were able to achieve such tiny pictures without it. As for mobile, I'm satisfied enough with the the way the images look in portrait mode, but on landscape the images are very small. In the reference site, they scale out to almost fit the width of the screen. I'm again wondering if code was used for that.

On Landscape mode, this is how the reference site looks like from my end on mobile and tablet respectively:

[hidden]

On the other hand, here is what the current site looks like:

[hidden]

As shown, it seems that the image sizes of the current site are already similar to the ones in the reference site on mobile and tablet for landscape. Were you able to fix it already? Are you seeing something different from your end?

Hope to hear from you soon! :)

Hi Fernando, hope all has been well. Yes, tablet view is looking good now that I've added the code back in that you gave me some messages back. I tried achieving the same look without code but wasn't successful. I thought maybe the code would slow my site down a bit but after taking it all out and testing my speed, there wasn't much of a difference, so I don't mind that it's in there. As for mobile, the view is much different. Tablet and desktop are fine, but the images for mobile aren't where I'd like them to be yet. Would it be possible to provide code for that as well? I may also need code to make the image sizes the same as the reference site for mobile for the WPSP articles as well, if possible. I haven't heard back from support for about 3 or 4 days regarding the issue regarding that, so I may have to get help here If I can. Btw, would it be alright to delete those screenshots when this has been resolved? Just to be on the safe side :)

As for mobile, the view is much different. Tablet and desktop are fine, but the images for mobile aren’t where I’d like them to be yet. Would it be possible to provide code for that as well?

Can you send a screenshot of what the images look like from your end once more? I can’t seem to see a difference in the article images for mobile on landscape and tablet.

Moreover, to have a better understanding and provide the a proper code, may you also provide all the custom CSS you have for this specific issue?

may also need code to make the image sizes the same as the reference site for mobile for the WPSP articles as well

With regards to this, here is a CSS you may try:

@media (max-width: 768px) {
        .wp-show-posts article.post.type-post .wp-show-posts-inner img {
        width: 100%;
        object-fit: fill;
    }
}

Btw, would it be alright to delete those screenshots when this has been resolved?

Yes, that would definitely be alright. :)

Hope to hear from you soon! :)

Thanks for the WPSP code. It looks good in portrait mode, but it's keeping the same size in landscape, which looks way too big for some reason. I'll link the reference site sizes down below. As far as the regular content images go, I'm not able to get a proper screenshot on the ref site of how they look in landscape mode as they are too big, but I've taken two separate screenshots of the whole image size just in case it might be helpful. Images size for tablet are fine now, so there's nothing to do there. My only focus now is mobile.

I did not add the portrait mode sizes for the WPSP posts because with that code you just gave me it looks fine, it's just in landscape mode where it starts to look overly large and bloated. Even with the ad there, in landscape mode for WPSP posts, the image is taking up the whole screen on my site. Please let me know if there's anything else you need me to provide.

If that’s the case, for the WPSP images, you can modify the previous code to something like this:

@media (max-width: 768px) and (orientation:portrait) {
        .wp-show-posts article.post.type-post .wp-show-posts-inner img {
        width: 100%;
        height:auto;
        object-fit: fill;
    }
}

@media (max-width: 768px) and (orientation:landscape) {
    .wp-show-posts article.post.type-post .wp-show-posts-inner img {
        width: 60%;
        height:auto;
        object-fit: fill;
    }
    .inside-article .post-image img {
        width:95%;
        height:auto;
    }
}

I also included code for the image size in the articles.

This code above:

.inside-article .post-image img {
        width:95%;
        height:auto;
    }

However, the reason why the image sizes in the article differs from the reference site could be the difference in the image size settings in both website. Try going Settings > Media and modify the size of the image to the settings in your current reference website. (Do this without the code above to test).

See: https://share.getcloudapp.com/NQux2w02

Hope this helps!. :)

I tried messing around with it a bit but unfortunately I didn't notice any changes in size after doing so. Of course, the code worked perfectly. I have a ton of it in now but as long as it's not slowing my site down then everything is good :) Thanks for your help.

You’re welcome Devin! Glad to be of assistance! I’ve removed the previous screenshots as requested. Moreover, relatively, the amount of CSS added should have very little or insignificant effects to the speed of your site. Feel free to reach out anytime if you’ll need assistance with anything else. :)

Thanks, I really appreciate that! I appreciate the clarification regarding the CSS as well, gives me peace of mind. I think that solved all my issues regarding this topic so if you'd like, you can mark it as resolved :)