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%; }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 am sorry for the formatting of the post but i couldn't figure out how to make it work ahah
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.