Archived topic

Resizing blog grid featured image to fullscreen on mobile

5 replies · Started by Ophira on May 3, 2020

Viewing posts 1–6 of 6

May 3, 2020 at 6:45 am #1267361

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

May 3, 2020 at 7:58 am #1267593

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.

May 3, 2020 at 2:10 pm #1267962

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.

Screenshots of blog grid

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

Thanks and Regards,
Ophira

May 3, 2020 at 4:55 pm #1268057

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;
    }
}

May 3, 2020 at 11:48 pm #1268253

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

May 4, 2020 at 10:30 am #1269271

Glad you got it sorted :)

This archived topic is closed to new replies.

Start building better websites today.