Forcing mobile devices to display image in certain ways


#1

Hi,

I’m loving the Rocked theme. Thank you for this great theme!

I’ve created a post with an image aligned to the left. On a laptop and bigger screens, texts wraps nicely around the image, to the right. But on a mobile screen, the first word of the paragraph (‘in’) gets trapped on the top of the content area, and the second word (2018) continues underneath the image.

I think this is due to the image taking up much of the space in the content area, and only a very short words (e.g. ‘in’) can fit in the space in between the image and margin. Is there a site-wide way to fix this? My approach is to try force the mobile devices to centre any image in the post content area. Am I on the right track?

So, I’ve so far (unsuccessfully) added this CSS code on my child theme, but it doesn’t work.

/making images in the post aligned centre on moble devices/
@media only screen and (max-width: 1024px)
.entry-content img {
clear: both;
display: block;
margin-left: auto;
margin-right: auto;
}

I would appreciate any help, as I’m a beginner at css.

Thank you.


#2

Hello there,

Try this CSS code:

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

Regards,
Kharis


#3

Hi Kharis,

Thank you so much for your response! The CSS code indeed fixed the problem for that post, but it didn’t fix the same problem in another post with images. Please see below:

!


#4

Another one:


#5

Hello there,

Try this code:

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

Regards,
Kharis


#6

Hi Kharis

Thank you for your help. Your code worked beautifully for a number of devices. But on my Moto G5 Plus, it still looks the same, and I can’t figure out why. I’ve been trying to tweak your code, but nothing worked so far…


#7

Probably your Moto G5 Plus has higher resolution? Try this code:

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

Regards,
Kharis


#8

It worked!!! Thanks you so much for this help!


#9

You’re welcome!

Please let us know in a new topic if you have any further questions, or if we can provide you with any other assistance.

Regards,
Kharis