[Resolved] Resizing blog grid featured image to fullscreen on mobile

[Ophira]

Hello Tom, David and Leo,

My current configuration is as follows:

Customizer> Layout> Blog> Featured Images> Archives> Alignment: Left

Width: 250px Height: 250px

The above setting looks good on a desktop but on a mobile looks inelegant with the small image.

Is there a way to change the way the featured image is displayed on a mobile archive page which will give a similar result as follows:
Alignment: Center

Width: Auto Height: Auto

while maintaining the left orientation setting for desktop.

Cheers,

Ophira

[David]

Hi there,

can you share a link to your site so i can take a look ?
You can edit your our original topic and use the Site URL field to share it privately.

[Ophira]

Hello David,

I’m working on localhost, so I do not have a link.

I hope the shared image link helps to explain the problem.

https://drive.google.com/file/d/1Dtq-D9j207os9tenCYSxOWqlU12QdOd0/view?usp=sharing

Thanks and Regards,
Ophira

[Tom]

Hi there,

Hard to tell without seeing the website, but you could try this:

@media (max-width: 768px) {
    .resize-featured-image .post-image img {
        width: auto;
        height: auto;
    }
}

[Ophira]

Hi Tom and David,

Finally figured it out.

I set Customizer> Layout> Blog> Featured Images> Archives> Alignment: Center

Width: Auto Height: Auto

and used the css below:

@media (min-width: 1025px) {
img.wp-post-image {
width: 250px;
height: 250px;
float: left;
margin: 15px 15px;

}
}

Thanks and Regards,

Ophira

[Tom]

Glad you got it sorted 🙂

[Author]

Posts