I solved it
1. Download
Custom CSS & JS
2. Add custom CSS
@media screen and (max-width: 768px) {
.wp-block-image img {
width: 100vw !important; /* Forces the image to take 100% of the viewport width /
height: auto !important; / Maintains the image’s aspect ratio, preventing distortion /
max-width: none !important; / Crucial: Allows the image to exceed its original pixel width if 100vw is larger, preventing shrinking / / These properties are the key to making the image go truly edge-to-edge,
by counteracting any default padding your theme might have on the main content area. /
margin-left: calc(50% – 50vw) !important;
margin-right: calc(50% – 50vw) !important; display: block !important; / Ensures proper layout behavior for margins */
padding-right: 5px;
padding-left: 5px;
}
}
You can add
padding-right: 5px;
padding-left: 5px;
if you want some padding
