HTML / CSS сломан на мобильном устройстве

Question

Как я могу сделать так, чтобы панель навигации не ломалась на мобильных устройствах?

Github репозиторий: https://github.com/Hampusm/hampusm.github.io

Css:

body {
  margin: 0;
}

.navbar {
  overflow: hidden;
  background: #304352;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #304352, #d7d2cc);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 6px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: monospace
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px;
  background: #304352;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #304352, #d7d2cc);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@viewport {
  zoom: 1.0;
  width: device-width;
}

<div class="navbar">
  <a><b>HampusM</b></a>
  <a href="http://hampusm.github.io">Home</a>
  <a href="repositories.html">Repositories</a>
  <a href="contact.html">Contact</a>
  <embed style="float:right" , src="switch.svg" width="50" type="image/svg+xml" />
</div>
<div class="main">
  <center>
    <br>
    <h1>Home</h1>
    <br>
    <!-- this br is meant to not end with a > -->
    <br <div class="btn-group">
    <a href="https://github.com/Hampusm"><button type="button" class="btn btn-primary">Github</button></a>
    <a href="https://discord.gg/6T8BukM"><button type="button" class="btn btn-primary">Discord</button></a>
    <a href="https://twitter.com/hampusm03"><button type="button" class="btn btn-primary">Twitter</button></a>
</div>
</center>
</div>

Как видите, я использую @viewport, но он все еще ломается.

и да, я пробовал поискать в Google, но я могу найтиответ.

Изображение о том, как оно выглядит на рабочем столе

Изображение о том, как оно выглядит на мобильном телефоне

Answer 1

Переместить вставку из навигационной панели.Поместите его туда, куда хотите

body {
  margin: 0;
}

embed {  position:absolute; top:0; right:0}

.navbar {
  overflow: hidden;
  background: #304352;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #304352, #d7d2cc);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  position: fixed;
  top: 0;
  width: 100%;
}

.navbar a {
  float: left;
  display: block;
  color: black;
  text-align: center;
  padding: 6px 16px;
  text-decoration: none;
  font-size: 17px;
  font-family: monospace
}

.navbar a:hover {
  background: #ddd;
  color: black;
}

.main {
  padding: 16px;
  margin-top: 30px;
  height: 1500px;
  background: #304352;
  /* fallback for old browsers */
  background: -webkit-linear-gradient(to left, #304352, #d7d2cc);
  /* Chrome 10-25, Safari 5.1-6 */
  background: linear-gradient(to left, #304352, #d7d2cc);
  /* W3C, IE 10+/ Edge, Firefox 16+, Chrome 26+, Opera 12+, Safari 7+ */
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

@viewport {
  zoom: 1.0;
  width: device-width;
}

<div class="navbar">
  <a><b>HampusM</b></a>
  <a href="http://hampusm.github.io">Home</a>
  <a href="repositories.html">Repositories</a>
  <a href="contact.html">Contact</a>
</div>
<embed src="switch.svg" width="50" type="image/svg+xml" />
<div class="main">
  <center>
    <br>
    <h1>Home</h1>
    <br>
    <!-- this br is meant to not end with a > -->
    <br <div class="btn-group">
    <a href="https://github.com/Hampusm"><button type="button" class="btn btn-primary">Github</button></a>
    <a href="https://discord.gg/6T8BukM"><button type="button" class="btn btn-primary">Discord</button></a>
    <a href="https://twitter.com/hampusm03"><button type="button" class="btn btn-primary">Twitter</button></a>
</div>
</center>
</div>