I am new to HTML and CSS and I am trying to format the result of my code so that the page is responsive and it looks one way on mobile and another way on desktop for better readability. I have made it looking at the W3.School tutorials and I have a nav bar on the side while the main text is divided into two columns set up with flex. I would like to make it so that the two columns show up underneath each other when the screen is smaller.
Here is the link to codepen to take a look at what I've done so far: codepen
header {
background-color: mediumpurple;
padding: 30px;
text-align: center;
}
h1 {
color: #000000;
text-align: center;
font-family: times new roman;
font-size: 30px;
}
h2 {
color: #000000;
text-align: center;
font-family: times new roman;
}
p {
font-family: times new roman;
font-size: 18px;
color
}
p.ex1 {
font-family: times new roman;
font-size: 18px;
margin-bottom: 60px;
}
p.ex2 {
font-family: times new roman;
font-size: 18px;
text-align: center;
}
p.ex3 {
margin-top: 60px;
margin-bottom: 60px;
text-align: center;
}
p.indented-paragraph {
font-family: times new roman;
font-size: 18px;
text-indent: 20px;
margin-bottom: -15px;
margin-left: 20%;
}
img {
max-width: 100%;
height: auto;
}
div.container {
overflow: hidden;
}
div.left {
float: left;
}
div.right {
float: right;
}
div.columns {
display: flex;
margin-bottom: 100px;
}
div.columns>div {
width: 50%;
}
section {
display: -webkit-flex;
display: flex;
}
a:link {
color: darkslateblue;
background-color: transparent;
text-decoration: underline;
}
a:visited {
color: mediumorchid;
background-color: transparent;
text-decoration: underline;
}
nav {
-webkit-flex: 1;
-ms-flex: 1;
flex: 1;
background: lavender;
padding: 20px;
}
nav ul {
list-style-type: none;
padding: 0;
text-align: center;
}
article {
-webkit-flex: 3;
-ms-flex: 3;
flex: 3;
background-color: snow;
padding: 10px;
}
@media only screen and (max-width: 620px) {
section {
-webkit-flex-direction: column;
flex-direction: column;
}
/* For mobile phones: */
.container .div.columns .section .nav .article .ul {
width: 100%;
}<body>
<header>
<div class="container">
<div class="left">
<h3>Patented Dec. 28, 1943</h3>
</div>
<div class="right">
<h3>2,337,621</h3>
</div>
</div>
<h2><b>UNITED STATES PATENT OFFICE</b></h2>
<h3 style="text-align: center;">
2,337,621
</h3>
<h1><b>TIMING DEVICE FOR SCRIPT READING</b></h1>
<p style="text-align: center;" class="ex1">
William S. Peevey, Oakland, Calif.
<br> Application March 20, 1941, Serial No. 384,357
<br> 2 Claims. (CL 40—31)
</p>
</header>
<section>
<nav>
<ul>
<li>
<h2><b>Contents</b></h2>
</li>
<br>
<p class="ex2">
<li><a href="#Page-1">Page 1</a></li>
</p>
<p class="ex2">
<li><a href="#Page-2">Page 2</a></li>
</p>
<p class="ex2">
<li><a href="#Page-3">Page 3</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-1">Figure 1</a></li>
</p>
<p class="ex2">
<li> <a href="#Figure-2">Figure 2</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-3">Figure 3</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-4">Figure 4</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-5">Figure 5</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-6">Figure 6</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-7">Figure 7</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-8">Figure 8</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-9">Figure 9</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-10">Figure 10</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-11">Figure 11</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-12">Figure 12</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-13">Figure 13</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-14">Figure 14</a></li>
</p>
<p class="ex2">
<li><a href="#Figure-15">Figure 15</a></li>
</p>
</ul>
</nav>
<article>
<h2 id="Page-1" style="margin-bottom: 60px;">Page 1</h2>
<div class="columns">
<div>
<p class="indented-paragraph">This invention relates to a new and useful im-
<br> proved script reading timing device that is adapt-
<br> ed for use in radio broadcasting and all other
<br> types of scrip reading.</p>
<p class="indented-paragraph">It is an object of the present invention to pro-
<br> vide a specially constructed device of the charac-
<br> ter described that can be made miniature in size
<br> and operated and controlled in an exceptionally
<br> simple manner.</p>
<p class="indented-paragraph">It is another object of the invention to provide
<br> two spools for carrying script tape and means
<br> for automatically conveying the tape from one
<br> spool to the other and past a time indicator.</p>
<p class="indented-paragraph">It is another object of the invention to control
<br> the conveying of said tape by the combination
<br> of an electric motor and a mechanical motor.</p>
<p class="indented-paragraph">It is another object of the invention to provide
<br> means for producing a continuous pulling tension
<br> on the tape while it is being unwound from the
<br> primary spool.</p>
<p class="indented-paragraph">Another object of the invention is to provide
<br> means for conveying the tape past a time indi-
<br> cator at a constant unchanging speed and to also
<br> provide means for enabling the speed to be
<br> changed if desired.</p>
<p class="indented-paragraph">Another object of the invention is to provide
<br> improved means for controlling the device in a
<br> manner that will enable the reading to be re-
<br> hearsed.
</p>
<p class="indented-paragraph">The invention further consists in the particu-
<br> lar combination, construction and association of
<br> the different parts, such as described in the fol-
<br> lowing specification, and possesses various other
<br> objects and features of advantage which will be
<br> apparent during the course of the following
<br> description.
</p>
<p class="indented-paragraph">In the accompanying drawings forming a part
<br> of this specification and in which like numerals
<br> are employed to designate like parts throughout
<br> the same,</p>
<p class="indented-paragraph"><a href="Figure%201.png" target="_blank">Fig. 1</a> is a top plan view of the device and par-
<br> ticularly shows two elongated cylindrical hous-
<br> ings, one a primary housing from which the tape
<br> is drawn, and the other a secondary housing into
<br> which the tape is conveyed;</p>
<p class="indented-paragraph"><a href="Figure%202.png" target="_blank">Fig. 2</a> is an outer end view of a cap that fits on
<br> the left end of the secondary housing;</p>
<p class="indented-paragraph"><a href="Figure%203.png" target="_blank">Fig. 3</a> is a central vertical sectional view of said
<br> cap and a mechanical motor that is mounted
<br> therein;
</p>
<p class="indented-paragraph"><a href="Figure%204.png" target="_blank">Fig. 4</a> is a sectional view taken on the line
<b>4—4</b>
<br> of Fig. 3, looking in the direction of the arrows,
<br> and shows a coiled spring and the preferred con-
<br> struction of the mechanical motor;</p>
<p class="indented-paragraph"><a href="Figure%205.png" target="_blank">Fig. 5</a> is a longitudinal side elevational view of
<br> the primary housing with a portion of the hous-
<br> ing wall broken away to show a specially con-
<br> structed spool for carrying the tape and one of
<br> the rollers that is provided for controlling the
<br> tape;
</p>
</div>
<div>
<p class="indented-paragraph"><a href="Figure%206.png" target="_blank">Fig. 6</a> is a view showing the manner in which
<br> an idler roller is mounted in the secondary hous-
<br> ing;
</p>
<p class="indented-paragraph"><a href="Figure%207.png" target="_blank">Fig. 7</a> is a fragmentary end sectional view taken
<br> on the line <b>7—7</b> of <a href="Figure%201.png" target="_blank">Fig. 1</a>, looking in the direction
<br> of the arrows, illustrating the manner in which
<br> the tape travels from the primary housing to the
<br> secondary housing and past the reading point of
<br> time, and showing in elevation the lids that are
<br> hinged to the lower right ends of said housings;</p>
<p class="indented-paragraph"><a href="Figure%208.png" target="_blank">Fig. 8</a> is an inside plan view of a cap that is
<br> mounted on the left end of the primary housing,
<br> said cap containing the electric motor and reduc-
<br> ing gears for imparting revolvable movement to
<br> the spool in said housing;</p>
<p class="indented-paragraph"><a href="Figure%209.png" target="_blank">Fig. 9</a> is a central longitudinal enlarged broken
<br> sectional view of the primary housing, spool
<br> therein, and spool winder in the right end there-
<br> of, showing in elevation the electric motor and
<br> reducing gears in the left end thereof;</p>
<p class="indented-paragraph"><a href="Figure%2010.png" target="_blank">Fig. 10</a> is a vertical sectional view taken on
<br> the line <b>10—10</b> of <a href="Figure%209.png" target="_blank">Fig. 9</a>, looking in the direction
<br> of the arrows;</p>
<p class="indented-paragraph"><a href="Figure%2011.png" target="_blank">Fig. 11</a> is a vertical sectional view taken on the
<br>
<b>line 11—11</b> of <a href="Figure%209.png" target="_blank">Fig. 9</a>, looking in the direction of
<br> the arrows;</p>
<p class="indented-paragraph"><a href="Figure%2012.png" target="_blank">Fig. 12</a> is a longitudinal view of the driven roll-
<br> er shaft and illustrates the manner in which the
<br> same is revolubly supported in the prmary hous-
<br> ing and provided with a pinion that is capable of
<br> engaging with the gears driven by the electric
<br> motor;
</p>
<p class="indented-paragraph"><a href="Figure%2013.png" target="_blank">Fig. 13</a> is a longitudinal side elevational view
<br> of the adjustable shaft and illustrates the man-
<br> ner in which the same is revolubly supported on
<br> a pair of adjusting levers that are mounted in
<br> the primary housing;</p>
<p class="indented-paragraph"><a href="Figure%2014.png" target="_blank">Fig. 14</a> is a top plan view of said adjustable
<br> shaft and levers and illustrates the manner in
<br> which the levers are connected together; and</p>
<p class="indented-paragraph"><a href="Figure%2015.png" target="_blank">Fig. 15</a> is a diagrammatic view, illustrating a
<br> plurality of the script timing devices and the con-
<br> trols for separately operating the same.</p>
<p class="indented-paragraph">In the accompanying drawings wherein for
<br> the purpose of illustration is shown a preferred
<br> embodiment of my invention, the numeral <b>17</b>
<br> designates the primary housing and the numeral
<br>
<b>18</b> the secondary housing, both of which are
<br> preferably made of sheet metal and cylindrically
<br> formed and provided with slots <b>19</b> and <b>20</b>, re-
<br> spectively, through the cylindrical walls thereof,
<br> as shown in Figs. <a href="Figure%201.png" target="_blank">1</a> and <a href="Figure%207.png" target="_blank">7</a>. Covers
<b>21</b> and <b>22</b>
<br> are hinged, respectively, to the right ends of said
<br> housings <b>17</b> and <b>18</b> by suitable hinges <b>23</b> and <b>24</b>,
<br> respectively, and an intermediate member or
<br> handle <b>25</b> is provided for holding the housings
<br> together, as shown in Figs. <a href="Figure%201.png" target="_blank">1</a> and <a href="Figure%207.png" target="_blank">7</a>. A pair of
<br> suitable guides <b>26</b> and <b>27</b> extends over both of
<br> said housings for carrying the tape from one
<br> housing to the other and are fastened to the cyl-</p>
</div>
</div>
<hr style="height:2px;border-
width:0;width:50%;color:lightblue;background-color:lightblue">I would be very thankful if someone managed to figure out how I can make the columns layout responsive, as I have only managed to make the nav bar shift based on screen size.
I tried to use the responsive web design framework W3.CSS as seen on https://www.w3schools.com/html/html_responsive.asp but it didn't work. I might have made a mistake in applying the code though.
Just like you change
flex-directionfor yoursection, because thedisplay: flexthat thesectionhas automatically put its underlying children as columns, you also need to changeflex-directionon yourdiv.columnsso the text goes from column to row when the width is 620px or less.You can have several selectors share the same CSS styling, in this case
sectionand.columnsas shown below.ADDITION
Also, a quick fix for when the text wraps in an incorrect way on smaller screens, replace your current CSS selector with the following:
... OR