Я новичок в HTML, и хотя в первый раз я попробовал адаптивность, на этот раз это сработало по какой-то причине.Я должен представить это на следующей неделе.Пожалуйста помоги.Кстати, это отображается через Iframe.
Я пытался заменить <span> на <div>, и он все еще не работает.Это CSS:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.two{
float:left;width:50%;color:white;font-family:arial;
}
.one{
float:left;width:50%;
}
p{
color:white;padding:60px;text-align:justify;font-family:arial;
}
h2{
color:white;padding:20px;text-align:center;
}
.main{
background-color:black;height:40%
}
@media screen and (max-width :830px) {
.one,.two,{
width:100%;
float:none;
}
}
</style>
</head>
<body>
<div class="main">
<span class="one" >
<img src="game.jpg" alt="Sorry,but this pic isn't available
currently"style="width:100%;height:100%"></span>
<span class="two" >
<h2>"Gamers don't die, they respawn"</h2>
<p>The status of gamer has finally shown some importance in the past few
years and gaming has almost become common in the majority of economy.
Famous blockbusters like Fortnite, PUBG, Warframe, Modern Combat and Rocket
League are being released world-wide in order to encourage the ever-
expanding envelope of
technology and gaming.This website gives you reviews of such games and their
download links along with other info.</p></span></div>
</body>
Я хочу, чтобы каждый диапазон отображался ниже друг друга после достижения точки останова.