[Resolved] Images on mobile look unaligned

[Bhavleen]

Hi!

Could someone please check the URL in the mobile responsive mode?

I have set pics to be right aligned, but on the mobile, they don’t look properly aligned.

Can someone please tell me how to resolve this issue?

Thanks

[Ying]

Hi there,

The images are aligned to right on mobile, the orange part is the margin applied to the image which is set to float right.
https://www.screencast.com/t/S35onORf

Are you hoping the text would wrap around the image? If so, there’s simply not enough space for the text, you’ll need to reduce the image size in this case.

Let me know if I miss anything.

[Bhavleen]

Can I do something that could make images get full width and centre aligned on mobile?

Is that possible with some CSS or something?

[Ying]

Try this CSS:

@media (max-width: 768px) {
.site-main .wp-block-image figure.alignright {
    float: none;
    margin: 0 !important;
}
}

[Bhavleen]

Ying,

this worked, but now images are more left aligned on the mobile version. Can we make them perfectly centre aligned?

[Fernando]

Hi Bhavleen,

Can you try modifying the code to this?:

@media (max-width: 768px) {
    .site-main .wp-block-image figure.alignright {
        float: none;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

[Bhavleen]

This is much better, Fernando.

Just want to confirm, this will only apply to the images that I will align right in the backend?

If I make a few images left aligned, will they get center aligned as well when the page hits the mobile screen?

or we need to modify the CSS?

Thanks for all the help.

[Fernando]

This will only apply to right aligned ones. Are you wanting to center align left-aligned ones as well on mobile? Or, are you planning to center align all images on mobile?

[Bhavleen]

Yes, I would want all the images to be center-aligned, whether I have made them right or left aligned for the desktop.

I am only talking about the post content images, not the images I will use on other places like individual pages, etc.

Thanks again 🙂

[Fernando]

I see. Replace the code I provided with this:

@media (max-width: 768px) {
    .site-main .wp-block-image figure {
        float: none;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

[Bhavleen]

Just one issue, all the product images I have added are slightly right aligned now.

But other images are perfectly aligned. Is it something related to dimensions of product images?

[Fernando]

Can you point me to a specific image with slightly aligned right? I can’t seem to notice it from my end on mobile.

If you can share a screenshot, that would be great as well.

Uploading Screenshots: https://docs.generatepress.com/article/using-the-premium-support-forum/#uploading-screenshots

[Bhavleen]

Please check the screenshot below. I think it’s more left aligned.

which is weird when I check on a real mobile device it’s more right aligned.

https://prnt.sc/VCkHYXyFX5dh

[Fernando]

It’s center aligned from my end. Can you try clearing the cache of your mobile’s browser or try using a different browser to test?

[Bhavleen]

Yes, they are center aligned.

My apologies. Thanks for all the help! 🙂

[Author]

Posts