[Resolved] Images on mobile look unaligned

Home Forums Support [Resolved] Images on mobile look unaligned

Home Forums Support Images on mobile look unaligned

Viewing 15 posts - 1 through 15 (of 16 total)
  • Author
    Posts
  • #2390115
    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

    #2390249
    Ying
    Staff
    Customer Support

    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.

    #2390258
    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?

    #2390266
    Ying
    Staff
    Customer Support

    Try this CSS:

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

    Ying,

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

    #2390769
    Fernando
    Customer Support

    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;
        }
    }
    #2390776
    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.

    #2390781
    Fernando
    Customer Support

    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?

    #2390785
    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 ๐Ÿ™‚

    #2390788
    Fernando
    Customer Support

    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;
        }
    }
    #2390827
    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?

    #2390835
    Fernando
    Customer Support

    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

    #2390839
    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

    #2390841
    Fernando
    Customer Support

    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?

    #2390846
    Bhavleen

    Yes, they are center aligned.

    My apologies. Thanks for all the help! ๐Ÿ™‚

Viewing 15 posts - 1 through 15 (of 16 total)
  • You must be logged in to reply to this topic.