pretty much i have made a website that looks great on desktop, but looks absolutely awful on mobile, so im going to write a version that is the same level of quality as the desktop version.

however i have no idea how to do this, i have looked it up and i have found one thing telling me to use the following code;

<script>
if ("ontouchstart" in document.documentElement)
{
  // content for touch-screen (mobile) devices
}
else
{
  // everything else (desktop)
}
</script>

i want to put html in where the comments are, but I dont know how too. Any help?

CodePudding user response：

You're going to want to write media queries in your css file. You might have to get creative with some of the styles that are currently on your site but this is generally how you would go about changing the look of a page for mobile devices.

@media (max-width: 767px) {
   css styles that need to be altered for mobile go here!
}

You can also use min-width in the media query to apply stiles to large screens only.

@media (min-width: 767px) {
   css styles that need to be altered for destop go here!
}

And also there are ranges.

@media (min-width: 360px) and (max-width: 767px) {
   css styles for screens within this range go here!
}

CodePudding user response：

You have to come up with a design for the mobile, not just trying to make it fit on the screen. You can achieve the responsiveness using CSS screen media queries. Media queries basically takes the browser current resolution (be it desktop or any devices) and it will automatically adjust the changes you made (like layout changes) based on what you assigned to the media queries. And you can also look up for CSS frameworks like bootstrap and tailwind, they have an amazing responsive/fluid component built in.