-1

I'm pretty new to coding and all, so bear with me. I recently started coding a website (only HTML and CSS - and I would like to keep it that way) and I've been running into an issue. Every time I test my code on my computer, it works fine, but when I try it on a friends computer or on a mobile device, it's all messed up. I want to know how to make images or a bunch of text automatically resize themselves to fit any screen. Thanks!

Hasnain Shahzad
  • 9
  • 1
    It sounds like you're looking for `media queries`. However, in order for us to help you, please update your question so that it shows your code in a [**minimal, complete, and verifiable example**](http://stackoverflow.com/help/mcve). It would also be helpful if you could let us know what you have [**tried so far**](http://meta.stackoverflow.com/questions/261592) to solve your problem. For further information, please refer to the help article regarding [**how to ask good questions**](http://stackoverflow.com/help/how-to-ask), and take the [**tour of the site**](http://stackoverflow.com/tour). – Obsidian Age Feb 26 '18 at 22:39
  • You'll also need to provide a **specific** problem. Like what elements you want to stack under one another, display next to each other... what viewports you're working with, etc. "*Messed up*" is not a description of a problem, and without us being able to replicate it, we can't possibly solve it nor even know what you're **trying** to solve. – Obsidian Age Feb 26 '18 at 22:41
  • Possible duplicate of [How do I make a website responsive?](https://stackoverflow.com/questions/20210223/how-do-i-make-a-website-responsive) – Anonymous Feb 26 '18 at 23:08

2 Answers2

1

In a separate thread that was labeled as a duplicate, it asked how to automatically re-size your already responsive website to fit mobile screens. It didn't get an answer, and from what I can see here, this thread doesn't answer the question either.

Since I recently went through the same issue, I will share what I discovered.

For those using HTML5 to code their pages, in order for your page to be 'mobile friendly' you must add this code: <meta name=viewport content="width=device-width, initial-scale=1">. Some people are telling others to write it as <meta name=viewport content="width=device-width, initial-scale=1, user-scalable=yes">, but the user-scalable=yes is not necessary or needed. Every reputable how-to site I've visited, including the W3Schools.org site, that information is always left out. You don't need it.

If I leave the above code off of my pages, when I load them on my mobile, they automatically resize to fit the width of the screen. However, they then fail the Mobile-Friendly Test. If I insert the above code on my pages, I have to manually scale my pages down when I load them on my mobile. This was unacceptable to me. It should show the entire page and let the user scale upward, rather than the other way around.

The solution I found that satisfies both is this: <meta name=viewport content="width=device-width, initial-scale=0"> Not only does my site validate as 'mobile friendly,' but it also automatically resizes to fit the screen width on mobiles.

For those who have been searching for this solution for a while (at least the last 4 years from some of the dates I've seen for this question), and have yet to discover it, you're welcome!

Media Fire
  • 11
  • 1
0

You need to learn responsive design. Flexbox is a new css module which addresses these issues, but is not yet supported universally. For starters, try using percentages instead of units. Example: your container (say, a ) is 960px wide. It has a child element, a that is 750px wide, with font-size of 12 px. Divide the child by the container (750 / 960 = 0.7812. multiply the result by 100 = 78.12) So now you make the child div 78.12% instead of 750px. It will remain that percentage of the container no matter how much you squish the container. And use em instead of px for your fonts. Google these topics for more detailed explanation

Stuart Slaugh
  • 1
  • 2