GP's CSS for .alignleft, .alignright getting overwritten by block library style.css

[leohsiang]

This CSS from GP:

@media (max-width: 768px) {
    .alignleft, .alignright {
        float: none;
        display: block;
        margin-left: auto;
        margin-right: auto;
    }
}

is getting overwritten by this CSS from the core:

.wp-block-image .alignleft {
    float: left;
    margin-left: 0;
    margin-right: 1em;
    margin-top: 0.5em;
    margin-bottom: 0.5em;
}

Reference: https://www.screencast.com/t/xuM9arIZWt

I see two options:

1. Update the selector for our CSS so it overwrites the core CSS.
2. Remove our CSS and just let the core handles it. If users choose the align left/right option then it should stay float left/right on desktop and mobile. We can provide the CSS to un-float it if needed. Not sure about the backward compatibility on this though.

[diggeddy]

This is a complication created by core blocks not considering responsive behaviour in a blocks CSS. I would expect core to correct this in the future which would make changes to themes styles redundant.

If need be a user can treat the issue with CSS or use a GenerateBlocks Image Block

For now this a nofix and closing - if need be it can be reopened.