Question: CSS/HTML I am creating a calendar page for a simple website. My page is finished and looks good in desktop view. When I check to

CSS/HTML

I am creating a calendar page for a simple website. My page is finished and looks good in desktop view. When I check to see if the page is responsive, the tables fall off the page in mobile view. I do not know why my code is not working to change the 2 columns to 1 column in mobile view. I would appreciate if anyone could point out what is wrong with my code and how I can fix it.

(Please do not ask me to change my design using arrays or javascript. The assignment instructions specifically says to create the calendar page using tables)

CSS

.Calendar, th,td{ color: black; border: 1px solid navy; background-color: #add8e6; border-collapse: collapse; margin-bottom:1%; margin-top:1%; }

.eventDay{ background-color:red; }

.div_left, .div_right{ display: flex; flex-flow:column; } .row_main{ display:flex; justify-content: space-around; } .column{ -moz-column-count: 2; -webkit-column-count:2; column-count: 2; display: flex; } @media screen and (max-width: 480px){ .column{ -moz-column-count:1; -webkit-column-count:1; column-count:1; } .row_main:{ flex-flow:column; } }

HTML (I only posted couple of month since the code is too long to post)

January 2021
Sun Mon Tues Wed Thurs Fri Sat Important Dates
1
2 New Years
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17
18
19 20 21 22 23 Martin Luther King Day
24 25 26 27 28
29
30 Safety Meeing
31

February 2021
Sun Mon Tues Wed Thurs Fri Sat Important Dates
1 2 3 4 5 6
7 8 9 10 11 12 13
14
15
16 17 18 19 20 Presidents' Day
21 22 23 24 25 26 27
28

January 2021
Sun Mon Tues Wed Thurs Fri Sat Important Dates

1

2 New Years
3 4 5 6 7 8 9
10 11 12 13 14 15 16
17

18

19 20 21 22 23 Martin Luther King Day
24 25 26 27 28

29

30 Safety Meeing
31

February 2021
Sun Mon Tues Wed Thurs Fri Sat Important Dates
1 2 3 4 5 6
7 8 9 10 11 12 13
14

15

16 17 18 19 20 Presidents' Day
21 22 23 24 25 26 27
28

CSS/HTML I am creating a calendar page for a simple website. My

2 Tree Bike X G columns i x G columns Tables Falx Chade's X Chade's X + Nnnounce x | M Inbox (52 x Get Home X Tables colx Chade's BX File C:/Users/agill/Desktop/TCC/Springs20202192OTCC/Lab%202/arg_2_cal.htm c @ 1. Responsive 400 75% Online Elements Console Sources Network Performance O Filter Default levels Chade' Bicycle Company Chade's Bicycle Company Company Calendar Contact Us Day January 2021 July 2031 les Wed Thurs Fri Sat Supercam sun Mon Tue Wed Thurs Fresa Important san Dats Dates T: You 50 2 11 13 10 Independence 93 ? "Du 20 21 22 23 Luther Khas 12 13 14 15 16 17 Compar Picta 30 Safety 18 19 20 21 22 23 24 Safety 25 26 27 28 29 30 31 + Meeting February AY 2021 1 Wed Thu Fri Sat Important Sun Sun Tues Wed Thu Frida Important Dares Dais 1 2 10 11 12 13 IDE Presi 3 y 10 11 18 19 20 12 13 14 Day 15 16 17 18 19 20 21 34 x x | 3 22 23 24 25 26 27 29 30 31 March 2021 September 2021 is Wed Thurs Fils Importan Sun Mon Tue Wed Thurs Fresat Danes Dalar 2 3 4 PC 1 : 10 11 12 9 10 11 Labor Day 6 17 18 19 12 13 14 15 16 17 18 324 28 Safety 19 20 21 Safety 19 20 21 22 23 5 Bucycle Cinh : Console What's New X Highlights from the Chrome 83 update 19 New CSS angle visualization tools Beller visualize and edit CSS angle in the Stylus prane Emulate unsupported image types 2 new emulations to disable AVI and Webp image formats in the Rendering tab. -- Type here to search O Ei 9 W 7:14 PM 3/5/2021

Step by Step Solution

There are 3 Steps involved in it

1 Expert Approved Answer
Step: 1 Unlock blur-text-image
Question Has Been Solved by an Expert!

Get step-by-step solutions from verified subject matter experts

Step: 2 Unlock
Step: 3 Unlock

Students Have Also Explored These Related Databases Questions!