Question 278667 in Html Question posted in
Some basic documentation can be found here.

Html – How can I fix my pictures and texts shifting when viewed on mobile?

This is my first ever site and I am having trouble with content alignment on mobile. On desktop it looks normal but on mobile the contents shift to the right.

Here is the site’s link: https://koffeemuggers.neocities.org/

I already have <meta name="viewport" content="width=device-width, initial-scale=1.0"> in my codes but the problem still exists. I read other forum posts about this but it didn’t help.

Thanks for helping!

Tags:

2

Answers


  1. 0

    I would suggest trying flexbox in your CSS to help with layout, I have been using it for some time now and I think it will be useful to solve your problem.

    Login or Signup to reply.
  2. 0

    I’d recommend setting up Chrome Inspect Dev tools so you can debug with your physical device plugged in, it’s really useful cause you can inspect the elements, play around with the CSS, e.g. add the flex box like Kevin suggested in the previous answer, and you can even drop some javascript in console to test out if needed, link to that here:

    Chrome Inspect Dev Tools

    It’s best to test on an actual mobile device, not just inspect using dev tools on desktop and toggling devices, Dev Tools on desktop is not ideal and doesn’t always reflect what you’ll see on mobile and sometimes you might need to target something specific for mobile.

    A few other quick notes that you can take with a grain of salt:

    • you have no div tags in your source code
    • p tag has 100 px margin left and right – causing it to move
    • 500×500 px is probably too big for mobile, consider styling diff for mobile or making a bit smaller (more vertical for mobile)
    • center tag being used for the image, center not supported in html5: https://www.w3schools.com/tags/tag_center.ASP

    See screenshot of some quick edits and source code here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search