From d99ca6981c918b51a4e9758009b20fdc87c12623 Mon Sep 17 00:00:00 2001
From: Scotia <90799582+scotiam@users.noreply.github.com>
Date: Wed, 10 Nov 2021 17:35:21 -0500
Subject: [PATCH 1/2] mobile responsive
one problem: when screen switches to mobile size the chat part is too big, i think issue is in auto-div but not sure, cannot figure out. giving up!!
---
index.html | 92 +++++++++++++++---------------------------------------
script.js | 39 +++++++++++++++++++++++
style.css | 30 +++++++++++++++++-
3 files changed, 93 insertions(+), 68 deletions(-)
create mode 100644 script.js
diff --git a/index.html b/index.html
index 411cdfb..7c48da0 100644
--- a/index.html
+++ b/index.html
@@ -1,77 +1,35 @@
-
-
-
-
- CHIRP
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+ CHIRP
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
+
+
+
+
+
-
-
-
-
-
diff --git a/script.js b/script.js
new file mode 100644
index 0000000..29a47c8
--- /dev/null
+++ b/script.js
@@ -0,0 +1,39 @@
+function addDiv() {
+ //create a new P tag, save it in a variable
+ let theNewDiv = document.createElement("div");
+ //add a class to our new div element
+ theNewDiv.classList.add("auto-div");
+ //set the text inside the div
+ theNewDiv.innerHTML = document.getElementById("textInput").value;
+
+ //find the right tag to add the div to
+ //we used an id of "content-area" for
+ //the place where we want to add the chirp
+ let theContentArea = document.getElementById("content-area");
+
+ //add the new div to that tag
+ theContentArea.appendChild(theNewDiv);
+}
+
+function addImage() {
+ //create a new P tag, save it in a variable
+ let theNewDiv = document.createElement("div");
+ //add a class to our new div element
+ theNewDiv.classList.add("auto-div");
+
+ //create image tag to put into the div
+ theImgTag = "";
+
+ //set the text inside the div
+ theNewDiv.innerHTML = theImgTag;
+
+ //find the right tag to add the div to
+ //we used an id of "content-area" for
+ //the place where we want to add the twit
+ let theContentArea = document.getElementById("content-area");
+
+ //add the new div to that tag
+ theContentArea.appendChild(theNewDiv);
+
+
+}
diff --git a/style.css b/style.css
index 21fa347..37a6f0c 100644
--- a/style.css
+++ b/style.css
@@ -13,7 +13,7 @@ body {
color: blue;
}
-.my-button {
+.button {
border: 0px;
background-color: #90adc6;
padding: 10px;
@@ -58,3 +58,31 @@ body {
background-color: palevioletred;
border: 3px solid peachpuff;
}
+.right {
+margin: -15px 0;
+
+padding: 3px;
+text-align:right;
+
+}
+
+@media only screen and (max-width: 620px) {
+ /* For mobile phones: */
+ .right-col {
+ width: 100%;
+ }
+ .left-col {
+ position: fixed;
+ left: 0;
+ bottom: 0;
+ width: 100%;
+ background-color: #fad02c;
+ text-align: center;
+ }
+ .grid-container {
+ grid-template-columns: auto;
+ }
+ .auto-div {
+ width: 75%;
+ }
+}
From e177b8b1c3206c3dd61fc7411b0b2fe526d54e09 Mon Sep 17 00:00:00 2001
From: Scotia <90799582+scotiam@users.noreply.github.com>
Date: Wed, 17 Nov 2021 16:59:58 -0500
Subject: [PATCH 2/2] update 11/17
styles!
---
style.css | 16 +++++++++++++---
1 file changed, 13 insertions(+), 3 deletions(-)
diff --git a/style.css b/style.css
index 37a6f0c..863e3b0 100644
--- a/style.css
+++ b/style.css
@@ -26,7 +26,7 @@ body {
position: absolute;
top: 0px;
left: 0px;
- height: 100%;
+ min-height: 100%;
width: 100%;
/*set display to grid*/
@@ -39,12 +39,18 @@ body {
/*style left column*/
padding: 15px;
background-color: #fad02c;
+ height: 100%;
}
.right-col {
/*style right column*/
padding: 15px;
background-color: coral;
+ height: 100%;
+}
+
+#content-area {
+ height: 100%;
}
/*format for each chirp message*/
@@ -69,7 +75,9 @@ text-align:right;
@media only screen and (max-width: 620px) {
/* For mobile phones: */
.right-col {
- width: 100%;
+ /* width: 100%; */
+ height: 70%;
+ padding-bottom: 40%;
}
.left-col {
position: fixed;
@@ -78,9 +86,11 @@ text-align:right;
width: 100%;
background-color: #fad02c;
text-align: center;
+ height: 30%;
}
.grid-container {
- grid-template-columns: auto;
+ grid-template-columns: 100%;
+ grid-template-rows: 75% 25%;
}
.auto-div {
width: 75%;