Aligned Images Spacing Issue under Mobile Screen

If you insert an aligned image (left or right) in your post or page content, it probably will look good under Large Screen resolutions (Desktop or Tablet screens). But under Mobile screens there could be an issue with reduced space for text around the image (screenshot above).

If you face such issue, you could check our suggestions how it can be resolved:

Option 1: Reduce image max size under Mobile Screens

You can make content images smaller under mobile, i.e reducing max width to 200 pixel which will provide more space for text around them. Here is how it can be achieved:

1.Login to your Admin Panel

2. Navigate to Left Menu -> Appearance -> Customize -> ‘Additional CSS’ Section

3. Insert the following code:

@media screen and (max-width: 799px) {
    article .alignright img,
    article .alignleft img {
        max-width: 200px !important;
    }
}

4. Save changes by clicking on ‘Publish’ button

Option 2: Remove Alignment for images under Mobile

Another option would be simply to remove the alignment of images under Mobile.

1.Login to your Admin Panel

2. Navigate to Left Menu -> Appearance -> Customize -> ‘Additional CSS’ Section

3. Insert the following code:

@media screen and (max-width: 799px) {
   article .wp-block-image .alignleft,
   article .wp-block-image .alignright {
       float: none !important;
      width: 100% !important;
      text-align: center !important;
      margin-left:0 !important;
      margin-right:0 !important;
   }

   article .wp-block-image .alignleft img,
   article .wp-block-image .alignright img {
      display:inline-block !important;
   }
}

4. Save changes by clicking on ‘Publish’ button