Content is squashed when i make the window smaller


#1

What code should I input into the HTML/CSS editor to ensure that when I drag the browser window to a smaller size my content will still stay where it is and not move along with the window?
(The only way to see the blocked content is to roll the mouse to the side.)


#2

For example, I want my content to stay where it always was like this:


The content does not shrink with the window.


#3

But it is a bad thing that it doesn't shrink right? it means the website isn't mobile friendly.

Well, if you don't want anything to shrink, it is pretty simple, use px everywhere (for the width and height of your elements)


#4

You should look into media queries. https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries


#5

Why do you need media queries if you want do not want a mobile scaling website?


#6

Thanks, anyway.
How do I make a website mobile-friendly then?


#7

Well, there is a question you can't possible answer in a short time. In that case, do learn the media queries, use percentage and em, and px only where needed.

There are tutorials on how to make your website mobile-friendly, i guess you need to search for them using google