Solving the problem of candidate pop-up frames on mobile phone pages.

When opening the blogger's homepage on a mobile phone, clicking on the project border will cause it to go out of view,
CQXDYIR73
The text on the archive page is also aligned to the edge, which is quite inconsistent.
4OC932
This problem is caused by the following two CSS segments:

 /*--Mouse selection style article summary dynamically enlarges*/
.xlog-post:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
        }
.xlog-post {
    padding: 1rem;
}
/*---Mouse selection style archive article list dynamically enlarges*/
.items-center.-mx-2:hover {
            transform: scale(1.2);
            -webkit-transform: scale(1.1);
            -moz-transform: scale(1.2);
            -o-transform: scale(1.2);
            -ms-transform: scale(1.2);
}

Now changed to:

 /*--Mouse selection style article summary floats upwards*/
.xlog-post:hover {
		box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* Shadow when hovering over the box */
		transform: translate(0, -10px);/* Move the box 10px up when hovering over it */
        }
.xlog-post {
    padding: 1rem;
}
/*---Mouse selection style archive article list floats upwards*/
.items-center.-mx-2:hover {
		box-shadow: 0 16px 32px 0 rgba(48, 55, 66, 0.15);/* Shadow when hovering over the box */
		transform: translate(0, -10px);/* Move the box 10px up when hovering over it */
}

Corresponding styles:
The effect on the homepage is not obvious, only a shadow appears below, but the overall effect is not abrupt, and I am quite satisfied with it.
BBZV

The archive page clearly has a shadow.
_V6ZC8

Friends who use this blogger's CSS style can modify it according to the above styles if needed.

If the final draft passes the later tests, the blogger will publish all the custom CSS style codes.