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!
CodePudding user response：
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.
CodePudding user response：
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:
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
- 500x500 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
