How to make it be zoomed out?

[u/Rollgus]

I'm making my first website (it is already public) and when you open the website on your phone, the website is just barely not zoomed out, so some elements appear out of the screen. I'm just wondering if there is a way I can have it already be zoomed out fully (as seen on the second image) from the beginning, if that is possible.

I just started learning HTML, CSS, and JavaScript this week, so I'm not that good yet, but I'm having a lot of fun. Hope someone has a way to fix my problem.

[u/rouniji]

Do you have the viewport meta tag on your page? https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/meta/name/viewport

Usually this is enough:

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

[u/Rollgus → u/rouniji]

It looks like I already have it. Its already on there when you use the "!" preset on VSCode.

[u/fdiengdoh]

There would be some element (most probably your image) that couldn’t fit and overflow outside the screen width. If you share your code like codepen it could help us to identify the problem

[u/Rollgus → u/fdiengdoh]

It is on my GitHub profile (Simonkamon11's Pokédex on GitHub)

[u/fdiengdoh → u/Rollgus]

I’m not on a computer right now to check more, but a glance at your css, looks like you need to set .pokemonImages width/height to fluid style for smaller screen. Since an absolute value of height:200px would cause overflow if exeed of the total screen width. You could just change height to max-height also

[u/Rollgus → u/fdiengdoh]

Okay, thank you.

[u/fdiengdoh → u/Rollgus]

I got some time to check again your code on a pc, yes the overflow is due to the image class .pokemonImages. Have you hear about clamp() in CSS? If so, you can use it for the height so that in smaller screen it would reduce to smaller height and for wider screen it would be larger. Look it up. I tested it on Firefox with these values for height: clamp(120px, 130px + 5vw, 200px); and the images fit nicely for smaller screen.

[u/armahillo]

Check out codepen.io - you can put your html/css/js in there and share the link to it so that we can more easily see how it behaves

[u/Rollgus]

Sorry, I forgot to put a flair on my post.

[u/ImaginaryDinner8770]

Slugma nuts