Centering Images on Mobile Devices?

[RavenManiac]

How can I center an image on a mobile device only? Here's the page I'm working with. Thanks!

https://williamsburgmemorialpark.com/memorial-day-2020/

[afreshup]

Try adding this to your custom css ... I'm guessing that the image is "memorial-day-honor-guard.jpg" This will center the image if the browser window is 600px or smaller ... adjust screen size to your needs.

@media only screen and (max-width: 600px) {
.alignright img {
margin: 0 auto;
}
}

[RavenManiac]

@afreshup, thanks! Unfortunately, that doesn't seem to be working. I tried adding the !important property as well, but no luck. Suggestions?

[RavenManiac]

Okay, I tried this instead and it worked.

@media(max-width: 600px) {

    .wp-block-image .alignleft,
    .wp-block-image .alignright {
        float: none;
        margin-left: auto;
        margin-right: auto;
    }
    
}

[RavenManiac]

Ok, the solution above worked for selecting wp-block-images that are already aligned, but what if I want to select an image that is not aligned?

[Author]

Posts