Allineament text and image on my iphone is wrong

[De_Pasquale]

Good evening.
I have created my first post. I have an image and then a text.
On the Pc I see everything perfect, but on my iphno I see the text in a wrong position.
This is the post: https://hagarlane.com/2019/11/16/quarta-di-copertina/

And this is how I see the same post on my mobile phone.
Can someone help me, please?
Thank you so much.
Patrizia

[ruenel]

Hello Patrizia,

Thanks for writing in!

Do you want to center the image in smaller screens like this?

If that is the case, please add the following CSS code in the X > Theme Options > Global CSS (http://prntscr.com/evui3r)

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

We would love to know if this has worked for you. Thank you.

[De_Pasquale]

Hi Ruel.
My problem is that I see the text in my cellular phone as I show you in this screeshot:

I’d like to see the text on the right respect the image in my Iphone, as I see in my PC and as I see in other post. I don’t understand because sometime the alignement is wrong only in my cellular phone, as in this case. How I can definetly resolve? Thank you so much.
Patrizia

[christian]

Hey Patrizia,

Before I provide the override code to achieve what you need, I’d first like to show you why that is happening.

Please take a look at box 1 in the screenshot below.

It’s the same size as box 2 but look at the words “storico ambientato”. It does not fix box 2. Because the combination of those words doesn’t fit the container, they are pushed below the image. That is just a spatial limitation.

The solution to that is to reduce the image size on mobile view. Please add this code in X > Theme Options > CSS.

@media (max-width:480px) {
   .alignleft,
    .alignright {
        max-width: 30%;
    } 
}

This would be the result:

Please just note that it would still break on really old phones or small screen phones. In this case, you will want to follow Ruenel’s suggestion. Just reduce the media query breakpoint.

Hope that helps.

[De_Pasquale]

Thank you so much, Christian.
I put 50% insted of 30%. Your istructions work perfectly.
Thank you
Patrizia

[friech]

We are delighted to assist you with this.

Cheers!