Wygląd na urządzeniu mobilnym

pytanie zadane 20 września 2020 w HTML i CSS przez T4fi3eD Nowicjusz (140 p.)

Witam!

Mam taki problem ze stroną www. Otóż na komputerze wygląda ona normalnie, ale gdy zmniejszy się ekran czyli tak jakbyśmy korzystali z urządzenia mobilnego to wszystko się psuje.

Tak wygląda normalnie:

A tak wygląda gdy zmniejszymy sobie przeglądarkę:

<!DOCTYPE HTML>
<html lang="pl">
<head>
	
	<meta charset="utf-8" />
	<title>T4fi3eD - Proste strony www, skrypty minecraft</title>
	<meta name="description" content="Proste strony www (HTML, CSS) oraz skrypty pod serwery minecraft.">
	<meta name="keywords" content="t4fi3ed, minecraft skrypty, html, css, strony na zamowienie">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	
	<link rel="stylesheet" href="style.css" type="text/css" />
	<link rel="stylesheet" href="css/icons.css" type="text/css" />

</head>
<body>

	<div class="g">
		<div class="opis">
			<ul class="styl">
				<li><span class="color">Test1</span></li>
				<li><span class="color">Test2</span></li>
			</ul>
		</div>
	</div>
	
</body>
</html>

body
{
	background-image: url(img/background4.png);
	background-repeat: no-repeat;
	background-size: 100%;
	background-color: #dedede;
	font-size: 20px;
	margin: 0px;
}

.g
{
	width: 100%;
	height: 100%;
}

.opis
{
	float: left;
	width: 30%;
	height: 50%;
	padding-top: 8%;
	padding-bottom: 15%;
}

.styl > li
{
	color: #ffcc00;
	padding-bottom: 5px;
	margin-left: 70px;
	margin-right: 100px;
	border-bottom-style: solid;
	border-width: 1px;
	border-radius: 1px;
	border-color: #cbcbcb;
}

.color
{
	color: white;
}

Chciałbym żeby ten tekst znajdował się w tym samym miejscu gdy zmniejszę sobie przeglądarkę i żeby miał te podkreślenie (jak coś to jest border 1px).

2	komentarz 20 września 2020 przez Tomek Sochacki Ekspert (227,490 p.) poczytaj sobie o RDW (responsive web design) i @media w CSS. Myślę, że po 1-2 artykułach będziesz wiedział co i jak i gdzie szukać rozwiazania.