У меня есть 2 колонки, и я пытаюсь сделать сайт более мобильным. Мне трудно разобраться в коде для вертикальной компоновки моих 2-х столбцов, когда он выходит на мобильные устройства. Вот код, который у меня есть. Мне просто нужно сложить столбцы только для мобильных устройств, чтобы они могли реагировать. Пожалуйста, помогите.
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=.46, maximum-scale=3.0, minimum-scale=.46">
<style type="text/css">
html {width: 100%;} /* Force 'html' to be viewport width */
body {margin:0;}
.navbar {overflow: hidden; background-color: #000000; position: fixed; top: 0; width: 100%;}
.navbar a {float: left; display: block; color: #FF0000; text-align: center; padding: 16px; text-decoration: none; font-size: 25px;}
.navbar a:hover {background: #ddd; color: red;}
.main {padding: 16px; margin-top: 30px; height: 900px; }
</style>
<style>
* { box-sizing: border-box;}
.column { float: left; padding: 10px; height: 300px;}
.left { width: 50%;}
.right { width: 50%;}
.row:after { content: ""; display: table; clear: both;}
@media only screen and (max-width: auto) {
/* For mobile phones: */
.left, .right, .row {
width:100%; }
}
</style>
</head>
<body style="background-color: rgb(0, 0, 0);">
<div style="overflow:auto">
<div class="navbar">
<a href="http://hillsidehorror.com/index.html">Home</a>
<a href="http://hillsidehorror.com/about.html">About</a>
<a href="http://hillsidehorror.com/media.html">Media</a>
<a href="http://hillsidehorror.com/datestickets.html">Dates & Tickets</a>
`enter code here`<a href="http://hillsidehorror.com/directions.html">Directions</a><img height="75" align="right" src=
"http://hillsidehorror.com/hillsidehorror2020.jpg">
</div>
</div>
<div class="row">
<div class="column left" style="background-color:# rgb(0, 0, 0);">
<p> </p>
<p> </p>
<p> </p>
<p><img src="http://hillsidehorror.com/dates2020.png" style="max-width:100%;height:auto;"></img></p>
</div>
<div class="column right" style="background-color: rbg(0, 0, 0);">
<p> </p>
<p> </p>
<p> </p>
<p> </p>
<center><font color="#FFFFFF">Dates of Operations every Friday & Saturday starting September 18th to November 7th</font></font></center>
<center><font color="#FFFFFF">Ticket Booth opens at 7:30pm</font></font></center>
<p> </p>
<center><font color="#FFFFFF">Dates in <font color="#00FFFB">BLUE</font> are $15 each night</font></font></center>
<center><font color="#FFFFFF">Dates in <font color="#FF0000">RED</font> are $20 each night</font></font></center>
<p> </p>
<center><font color="#FFFFFF"><u>A TRICK OR TREAT SPOOKTACULAR</u></font></font></center>
<center><font color="#FFFFFF">October 31st 4pm-6pm</font></font></center>
<center><font color="#FFFFFF">Prior to our regular scary Halloween night show, we allow families to experience our attraction without the intense scare factor as they trick or treat along the trail. Admission just $5!</font></font></center>
<p> </p>
<center><font color="#FFFFFF"><u>DARKNESS FALLS</u></font></font></center>
<center><font color="#FFFFFF">November 6th & 7th</font></font></center>
<center><font color="#FFFFFF">Hillside Horror presents "Darkness Falls". Do you have what it takes to navigate the Hillside in TOTAL DARKNESS?</font></font></center>
<p> </p>
<center><font color="#FFFFFF"><u>TOYS FOR TERROR</u></font></font></center>
<center><font color="#FFFFFF">December 11th & 12th</font></font></center>
<center><font color="#FFFFFF">Experience Hillside Horror like never before as we add a twisted Christmas theme to our haunt.</font></font></center>
</div>
</div>
</div><script type="text/javascript">
<!--function SiteStats_9110(){var t=new Date();var u='http://hillsidehorror.com/cgi-bin/sitestats.gif?p='+escape(location.href)+';r='+escape(document.referrer)+';t='+t.getTime();
var I=new Image(1,1); I.src=u; }
SiteStats_9110();
//-->
</script><noscript>&amp;amp;amp;amp;amp;lt;img
src="http://hillsidehorror.com/cgi-bin/sitestats.gif?p=http%3A%2F%2Fhillsidehorror.com%2FHillside%20Horror%202020%2Fnewfile.html;r=http%3A%2F%2Fhillsidehorror.com%2Fcgi-bin%2Futil%2Ffm%2FHillside%2520Horror%25202020;t=9110;"
width=1 height=1 alt="sitestats"&amp;amp;amp;amp;amp;gt;</noscript>
</body>
</html>