Понятия не имею, как реализовать идею: Руническая Диаграмма (HTML, CSS)

Question

Итак, я хочу иметь этот график для игры, которую я скоро буду хостить. Я хочу, чтобы это работало так: когда вы наводите курсор мыши на определенный символ или руну, он будет иметь небольшой выпадающий список с информацией о нем, вот так. Я получил это на работу, но забыл это будет плавный дизайн. И это довольно проблематично, учитывая, что большинство будущих пользователей этого сайта имеют разрешение экрана, отличное от меня. И я понятия не имею, как заставить эту идею работать с плавным дизайном. Пожалуйста, помогите мне?

Вот код, если он помогает:

.pyramid {
		float: right;
		display: block;
		margin-right: 150px;
		position: relative;
		bottom: 35px;
	}
	
	
	.souldropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 860px;
		top: 50px;
	}

	.soulcontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.souldropdown:hover .soulcontent {
		display: block;
	}

	
	.honordropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 749px;
		top: 142px;
	}

	.honorcontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.honordropdown:hover .honorcontent {
		display: block;
	}
	
	
	.faithdropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 638px;
		top: 250px;
	}

	.faithcontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.faithdropdown:hover .faithcontent {
		display: block;
	}
	
	
	.fatedropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 518px;
		top: 348px;
	}

	.fatecontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.fatedropdown:hover .fatecontent {
		display: block;
	}
	
	
	.balancedropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 852px;
		top: 395px;
	}

	.balancecontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.balancedropdown:hover .balancecontent {
		display: block;
	}
	
	
	.perceptiondropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 558px;
		top: 278px;
	}

	.perceptioncontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.perceptiondropdown:hover .perceptioncontent {
		display: block;
	}
	
	
	.intuitiondropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 823px;
		top: 280px;
	}

	.intuitioncontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.intuitiondropdown:hover .intuitioncontent {
		display: block;
	}
	
	
	.bodydropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 177px;
		top: 585px;
	}

	.bodycontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.bodydropdown:hover .bodycontent {
		display: block;
	}
	
	
	.minddropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 1197px;
		top: 513px;
	}

	.mindcontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.minddropdown:hover .mindcontent {
		display: block;
	}
	
	
	.beautydropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 747px;
		top: 529px;
	}

	.beautycontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.beautydropdown:hover .beautycontent {
		display: block;
	}
	
	
	.condropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 553px;
		top: 372px;
	}

	.concontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.condropdown:hover .concontent {
		display: block;
	}
	
	.unddropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 639px;
		top: 372px;
	}

	.undcontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.unddropdown:hover .undcontent {
		display: block;
	}
	
	
	.thoughtdropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 1041px;
		top: 357px;
	}

	.thoughtcontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.thoughtdropdown:hover .thoughtcontent {
		display: block;
	}
	
	
	.knowledgedropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 1027px;
		top: 406px;
	}

	.knowledgecontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.knowledgedropdown:hover .knowledgecontent {
		display: block;
	}
	
	
	.dexdropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 489px;
		top: 353px;
	}

	.dexcontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.dexdropdown:hover .dexcontent {
		display: block;
	}
	
	
	.strdropdown {
		position: relative;
		margin-left: 50px;
		display: inline-block;
		left: 302px;
		top: 410px;
	}

	.strcontent {
		display: none;
		position: absolute;
		background-color: #f9f9f9;
		min-width: 230px;
		box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
		z-index: 1;
	}

	.strdropdown:hover .strcontent {
		display: block;
	}
	
	
	.desc {
		padding: 15px;
		text-align: left;
	}
	
	.h {
		float: left;
		margin: 15px;
		margin-left: 50px;
		padding: 10px;
		border-width: 2px;
		border-color: black;
		background-color: #999;
	}
	
	li a {
		display: block;
		color:#e6f0ff;
		text-align: center;
		padding: 7px 44px;
		text-decoration: none;
		font-family: comic sans ms;
		font-size: 18px;
	}

<!DOCTYPE html>
<html>
<head>
	<link rel="stylesheet" type="text/css" href="NeoCSS.css">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
	
	<img class="pyramid" src="runes/pyramid.png" alt="Rune Pyramid" width="50%">

	<div class="souldropdown">
	  <img src="runes/soul.png" alt="Soul Rune" height="50">
	  <div class="soulcontent">
		<div class="desc">
			The Soul Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk and runic chalk.
			It must be drawn with another rune to be focused.
			<hr>
			Connects to spirituality, spirits, emotion, and feeling (target must be living)
		</div>
	  </div>
	</div>
	
	<div class="honordropdown">
	  <img src="runes/honor.png" alt="Honor Rune" width="60">
	  <div class="honorcontent">
		<div class="desc">
			The Honor Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk, runic chalk, and blood.
			<hr>
			Connects to warriors, soldiers, and fallen heroes.
		</div>
	  </div>
	</div>
	
	<div class="faithdropdown">
	  <img src="runes/faith.png" alt="Faith Rune" width="60">
	  <div class="faithcontent">
		<div class="desc">
			The Faith Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk, runic chalk, and blood.
			<hr>
			Connects to religious peoples, deities, and spirits.
		</div>
	  </div>
	</div>

	<div class="fatedropdown">
	  <img src="runes/fate.png" alt="Fate Rune" width="60">
	  <div class="fatecontent">
		<div class="desc">
			The Fate Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk, runic chalk, and blood.
			<hr>
			Difficult to harness, but if used correctly, can be used to control fate itself.
		</div>
	  </div>
	</div>
	
	<div class="balancedropdown">
	  <img src="runes/balance.png" alt="Balance Rune" width="70">
	  <div class="balancecontent">
		<div class="desc">
			The Balance Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk, runic chalk, and blood.
			<hr>
			Difficult to harness, but if used correctly, can be used to control the balance of anything.
		</div>
	  </div>
	</div>
	
	<div class="perceptiondropdown">
	  <img src="runes/perception.png" alt="Perception Rune" width="40">
	  <div class="perceptioncontent">
		<div class="desc">
			The Perception Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk and runic chalk.
			<hr>
			Allows you to affect any one of the five senses of the target.
		</div>
	  </div>
	</div>
	
	<div class="intuitiondropdown">
	  <img src="runes/intuition.png" alt="Intuition Rune" width="60">
	  <div class="intuitioncontent">
		<div class="desc">
			The Intuition Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk and runic chalk.
			<hr>
			Allows you to affect the intuition (e.g. scepticism) of the target.
		</div>
	  </div>
	</div>
	
	<div class="bodydropdown">
	  <img src="runes/body.png" alt="Body Rune" width="55">
	  <div class="bodycontent">
		<div class="desc">
			The Body Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk, runic chalk and blood.
			It must be drawn with another rune to be focused.
			<hr>
			Can be used to affect the physical form of the target (must be living).
		</div>
	  </div>
	</div>
	
	<div class="minddropdown">
	  <img src="runes/mind.png" alt="Mind Rune" width="55">
	  <div class="mindcontent">
		<div class="desc">
			The Mind Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk, runic chalk and blood.
			It must be drawn with another rune to be focused.
			<hr>
			Can be used to affect the mental form of the target (must be living).
		</div>
	  </div>
	</div>
	
	<div class="beautydropdown">
	  <img src="runes/beauty.png" alt="Beauty Rune" width="55">
	  <div class="beautycontent">
		<div class="desc">
			The Beauty Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk, runic chalk and blood.
			<hr>
			Can be used to affect how attractive the target looks to others.
		</div>
	  </div>
	</div>
	
	<div class="condropdown">
	  <img src="runes/constitution.png" alt="Constitution Rune" width="45">
	  <div class="concontent">
		<div class="desc">
			The Constitution Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk, runic chalk and blood.
			<hr>
			Can be used to affect the health of the target.
		</div>
	  </div>
	</div>
	
	<div class="unddropdown">
	  <img src="runes/understanding.png" alt="Understanding Rune" width="45">
	  <div class="undcontent">
		<div class="desc">
			The Understanding Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk, runic chalk and blood.
			<hr>
			Can be used to affect how well the target can understand any particular subject, which must be specified with other runes.
		</div>
	  </div>
	</div>
	
	<div class="thoughtdropdown">
	  <img src="runes/thought.png" alt="Thought Rune" width="45">
	  <div class="thoughtcontent">
		<div class="desc">
			The Thought Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk and runic chalk.
			<hr>
			Can be used to affect the mental process of the target.
		</div>
	  </div>
	</div>
	
	<div class="knowledgedropdown">
	  <img src="runes/knowledge.png" alt="Knowledge Rune" width="45">
	  <div class="knowledgecontent">
		<div class="desc">
			The Knowledge Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk and runic chalk.
			<hr>
			Can be used to affect what the target knows and remembers.
		</div>
	  </div>
	</div>
	
	<div class="dexdropdown">
	  <img src="runes/dexterity.png" alt="Dexterity Rune" width="45">
	  <div class="dexcontent">
		<div class="desc">
			The Dexterity Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk and runic chalk.
			<hr>
			Can be used to physically affect how agile or flexible the target is.
		</div>
	  </div>
	</div>
	
	<div class="strdropdown">
	  <img src="runes/strength.png" alt="Strength Rune" width="45">
	  <div class="strcontent">
		<div class="desc">
			The Strength Rune.<br>
			<hr>
			This rune can be drawn using arcane chalk, runic chalk, and blood.
			<hr>
			Can be used to affect the muscle mass of the target.
		</div>
	  </div>
	</div>
	
</body>
</html>

Answer 1

Попробуйте использовать процент вместо px для ширины, левого, верхнего, нижнего, правого, полей и т. Д. И используйте правила css @media для различной ширины устройства: https://www.w3schools.com/cssref/css3_pr_mediaquery.asp