Tool alignment looks different on my phone vs my friend’s phone 😅

  • Unknown's avatar
    muhammadasim4006 · Member ·

    Hey everyone,

    I recently made this small quiz just for fun, Rice Purity Test Lab. I embedded this quiz code inside a WordPress page using custom HTML. It works fine overall, but I noticed something strange, the alignment looks different on different phones.

    On my mobile, everything looks centered and fine, but on my friend’s phone, the buttons and text are slightly off to the side. We both checked on Chrome, so now I’m confused what’s causing it 😅

    Is there something I should change in the code to make it display the same on all devices? Maybe I need to add some responsive tag or meta setting?

    I’m still pretty new to all this, so any quick tips would be awesome 🙏

    The blog I need help with is: (visible only to logged in users)

  • Unknown's avatar
    mukeshoadcom · Member ·

    Hi @muhammadasim4006,
    Mobile display differences are usually due to responsive CSS issues in your custom HTML.
    Quick fixes:
    Add viewport meta tag:

    Use responsive widths:
    .container {
    max-width: 100%;
    margin: 0 auto;
    }
    Test different screen sizes:
    Use Chrome DevTools (F12) → Device toolbar
    Need more help?
    Share your HTML/CSS code or screenshots and I can give specific suggestions!
    Guide: https://wordpress.com/support/wordpress-editor/blocks/custom-html-block/

  • Unknown's avatar
    muhammadasim4006 · Member ·

    Okay Thanks sir for your help

  • The topic ‘Tool alignment looks different on my phone vs my friend’s phone 😅’ is closed to new replies.