Telegram API Question posted in
A comprehensive official documentation can be found here.

My website looks good only on my pc resolution – Telegram API

I want to make this code good for all devices. If I open it with like a smartphone, it looks very bad.

If you can tell me something to improve too, I would appreciate it!

Here is my index and stylesheet.

Thanks!

index.html:

.background {
  width: 99%;
  height: 100%;
}

.title {
  margin-top: 9%;
  color: white;
  font-family: "Lucida Console", "Courier New", monospace;
}

.subtitle {
  margin-top: 1%;
  color: #9c9c9c;
  font-family: "Lucida Console", "Courier New", monospace;
}

.socials {
  bottom: 0;
}

.fa {
  padding: 20px;
  font-size: 30px;
  width: 1%;
  height: 2%;
  text-align: center;
  text-decoration: none;
  border-radius: 50%;
}

.fa:hover {
  opacity: 0.7;
}

.fa-twitter {
  background: #55ACEE;
  color: white;
  float: left;
  clear: both;
}

.fa-telegram {
  background: #34abdf;
  color: white;
  float: left;
  clear: both;
}
.github {
  margin-right: 55px;
}
<!DOCTYPE html>
<html>
<head>
  <title>zDoctor_ | Developer</title>
  <meta name="keywords" content="Minecraft, zDoctor, zDoctor_, Telegram, Github, Doctor, doctor">
  <meta name="viewport" content="width=device-width">
  <meta charset="UTF-8">
  <link rel="stylesheet" href="css/stylesheet.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
  <script async defer src="https://buttons.github.io/buttons.js"></script>
</head>
<body style="background-color: #262a2e" class="background">
  <div class="title"><center><h1>zDoctor_</h1></center></div>
  <div class="subtitle"><center><h3>Java & Web Developer(I think)</h3></center></div>
    <div class="socials">
    <a href="#" class="fa fa-twitter"></a>
    <a href="#" class="fa fa-telegram"></a>
  </div>
  <div class="github">
    <center><a class="github-button" href="https://github.com/zDoctor-Dev" data-size="large" aria-label="Follow @zDoctor-Dev on GitHub">Follow @zDoctor-Dev</a></center>
  </div>
</body>
</html>

It says there is too much code and I need to add more details, but I don’t know what to write ^^’ so I’m just typing some random things.

Tags:

3

Answers


  1. 0

    edit your meta tag to this:

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
    Login or Signup to reply.
  2. 0

    You can’t simply improve like this. You have to add a meta tag for view port in HTML like: <meta name="viewport" content="width=device-width, initial-scale=1.0">In CSS you have a feature named media query like

    @media screen and (min-width: /*Your size in which you want the thing to change*/930px) {
  body {
    /*Your command like mine is*/
    background-color: black;
  }
}
    <!doctype html>

<html lang="en">
<head>
  <meta charset="utf-8">

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

<style>
body{
    background-color: red;
}
</style>

</head>

<body>
  <h1>Hello world!</h1>
</body>
</html>

    The above code will change when the size will be decreased. You have to make one for yourself. This is my tip to use query string.

    Login or Signup to reply.
  3. 0

    One trick is to make absolutely everything relative to the viewport. That way you at least get a properly responsive site on all window aspect ratios.

    Whether or not it looks OK on all sizes is something to be considered once you’ve done this – for a simple design, for example with lots of stuff just centered, you should not need to go into media queries.

    You can’t make a circle by having width in % and height in %, they are %s of different things so you won’t get the underlying square you need. Think about using vmin for the units here and giving them each say 3vmin and see how it works out.

    You can even define your font sizes in terms of vmin and they will adjust along with everything else (though be aware that going very very small wont work on some browsers).

    So, if you find yourself using px, stop and reconsider.

    Also look up more ‘modern’ ways of doing things like achieving centering and space filling. e.g. flex. Check that everything you are using is both standard and not deprecated. For example using HTML for formatting such as ‘<center’> isn’t now the thing.

    For the future, start thinking mobile first when you do a design – but as I say the design you have shown so far should be fine on a smaller viewport if you head for vmin.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search