I made a website for fun & testing but it doesn't look well on mobile as it works on desktop, especially images and specially positioned stuff got out of page. I tried

 <meta name="viewport" content="width=device-width, initial-scale=1">

but it still looks a way that nobody wants to see.

I'm a newbie codder please forgive my flaws :)

website: http://ersinski.epizy.com/

 <meta name="viewport" content="width=device-width, initial-scale=1">

CodePudding user response：

in your css file:

img {
max-width: 100%
}

CodePudding user response：

It's because you are centering things with left: 500px;. It's a fixed distance from the left side that will only look centered on a specific screen size. For example on a device with a screen width of 320px(mobile) all your 'centered' elements will start 500px from the left side even if that means going beyond the device screen.

For dynamic design look into flexbox.

And for your specific website:

1. Remove all the left: 500px; on 'centered' elements
2. Add display: flex; and flex-direction: column; to your body element
3. Add align-self: center; to anything you wanna center horizontally.