Skip to content

Commit

Permalink
Merge pull request #58 from Abhijeet-2003/Responsive-Branch
Browse files Browse the repository at this point in the history 
solved issues #4, #35, #51, #57
  • Loading branch information
@mohit200008
mohit200008 committed Dec 21, 2022
2 parents dda8ded + 4c7e96f commit 805517e
Show file tree
Hide file tree
Showing 17 changed files with 1,491 additions and 137 deletions.
2 changes: 1 addition & 1 deletion package-lock.json
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

6 changes: 3 additions & 3 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -13,11 +13,11 @@
"react-otp-input": "^2.4.0",
"react-router": "^5.1.2",
"react-router-dom": "^5.2.0",
"react-scripts": "3.2.0",
"react-simple-chatbot": "^0.6.1",
"react-scripts": "^5.0.1",
"react-simple-chatbot": "^0.5.0",
"styled-components": "^5.2.1",
"typescript": "^3.6.4",
"victory": "^33.1.1"
"victory": "^36.6.8"
},
"scripts": {
"start": "react-scripts start",
Expand Down
13 changes: 11 additions & 2 deletions src/Components/Creativity/Creativity.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,15 +9,18 @@ height: 50vh;

.subheading {
position: absolute;
top: 650px;
top: 80%;
/* left: 400px;
right: 200px; */
/* margin-top: 50%; */
color: orangered;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
sans-serif;
font-size: 36px;
font-weight: 500;
font-style: italic;
line-height: 44px;
/* line-height: 44px; */
}

@import url("https://fonts.googleapis.com/css?family=Cardo:400i|Rubik:400,700&display=swap");
Expand Down Expand Up @@ -66,6 +69,12 @@ border-radius: 10px;
height: 450px;
}
}
@media screen and (max-width: 440px) {
.subheading {
font-size: 25px;
top: 90%;
}
}
.card:before {
content: "";
position: absolute;
Expand Down
77 changes: 77 additions & 0 deletions src/Components/Fridge/Fridge.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -219,4 +219,81 @@

.header-green {
background-color: rgb(133, 185, 72);
}

@media screen and (max-width: 550px) {
.fridge-container{
width: 100%;
}
.fridge-title{
text-align: center;
margin: 0;
margin-top: 1rem;
font-size: 2rem;
}
.add-food-button {
width: 7rem;
height: 3.7rem;
font-size: 1rem;
background-color: rgba(255, 255, 255, 0);
border-radius: 1rem;
border: 1px black solid;
margin-top: 2rem;
margin-left: 1rem;
margin-right: 4rem;
cursor: pointer;
box-shadow: 5px 5px 5px lightgrey;
}

.food-form-element, .new-food-form-submit-button, .new-food-form-cancel-button {
width: 300px;
}
.new-food-form {
/* display: flex;
flex-direction: column; */
/* padding: 20px 20px; */
/* width: fit-content; */
width: 100%;
display: grid;
grid-template-columns: 330px;
justify-content: center;
align-items: center;
margin: auto;
border-radius: 30px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
background: #EAFFFE;
}
}
@media only screen and (min-width: 550px) and (max-width: 1000px) {
.food-form-element, .new-food-form-submit-button, .new-food-form-cancel-button {
width: 500px;
}
.new-food-form {
/* display: flex;
flex-direction: column; */
/* padding: 20px 20px; */
/* width: fit-content; */
width: 100%;
display: grid;
grid-template-columns: 500px;
justify-content: center;
align-items: center;
margin: auto;
border-radius: 30px;
box-shadow: rgba(100, 100, 111, 0.2) 0px 7px 29px 0px;
background: #EAFFFE;
}
.add-food-button {
width: 9rem;
height: 5.7rem;
font-size: 1.5rem;
background-color: rgba(255, 255, 255, 0);
border-radius: 1rem;
border: 1px black solid;
margin-top: 2rem;
margin-left: 18%;
margin-right: 4rem;
cursor: pointer;
box-shadow: 5px 5px 5px lightgrey;
}
}
206 changes: 198 additions & 8 deletions src/Components/Home/Home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,6 @@
justify-content: space-evenly;
}

.home-page-cards {
border-radius: 10px;
margin: 15px;
box-shadow: 2px 2px 4px 1px rgba(0, 0, 0, 0.25);
background: #fcfcfc;
transition-duration: 0.5s;
}

.home-page-food-count-container {
width: 40%;
z-index: 100;
Expand Down Expand Up @@ -70,6 +62,7 @@
}

.expiration-message {
color: black;
font-size: 1.5rem;
margin: 0;
margin-bottom: 2.5rem;
Expand Down Expand Up @@ -144,6 +137,8 @@
margin: 2% 3%;

box-shadow: 2px 2px 2px 2px grey;
transition-duration: 0.5s;

}
.slides {
background: #0000008a;
Expand All @@ -167,3 +162,198 @@
position: absolute;
left: 5px;
}

/* responsive code */
@media only screen and (max-width: 550px) {
.home-page-food-count-container {
width: 60%;
}
.msg1{
margin-top: 25%;
margin-bottom: 20%;
font-size: 35px;
}
.carousels{
width: 100%;

}
.slideshow-container{
width: 100%;
display: flex;
justify-content: center;
}
.slides{
height: 15rem;
}
.msg2{
margin-top: 26%;
font-size: 1.5rem;
font-weight: bold;
}
.home-page-cards {
width: 60%;
height: 10%;
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center; */
margin-bottom: 10%;
padding: 0% 4%;
}
.high{
margin-bottom: 2%;
}
.expiration-number {
font-size: 2rem;
/* margin: 0; */
/* margin-bottom: 0rem; */
font-weight: normal;
}

.expiration-message {
color: black;
font-size: 1.5rem;
/* margin: 0; */
margin-bottom: 1rem;
font-weight: normal;
}
.msghindi{
font-size: 1.3rem;
}
.home-page-food-count-img {
height: 15rem;
opacity: 0.8;
}
.hindi-expire-msg{
font-size: 1rem;
}
}
@media only screen and (min-width: 550px) and (max-width: 770px) {
.home-page-food-count-container {
width: 60%;
}
.msg1{
margin-top: 25%;
margin-bottom: 20%;
font-size: 35px;
}
.carousels{
width: 100%;

}
.slideshow-container{
width: 100%;
display: flex;
justify-content: center;
}
.slides{
height: 25rem;
}
.msg2{
margin-top: 26%;
font-size: 1.5rem;
font-weight: bold;
}
.home-page-cards {
width: 60%;
height: 10%;
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center; */
margin-bottom: 10%;
padding: 0% 4%;
}
.high{
margin-bottom: 2%;
}
.expiration-number {
font-size: 2rem;
/* margin: 0; */
/* margin-bottom: 0rem; */
font-weight: normal;
}

.expiration-message {
color: black;
font-size: 1.5rem;
/* margin: 0; */
margin-bottom: 1rem;
font-weight: normal;
}
.msghindi{
font-size: 1.5rem;
}
.home-page-food-count-img {
height: 17rem;
opacity: 0.8;
}
.hindi-expire-msg{
font-size: 1.2rem;
}
}

@media only screen and (min-width: 770px) and (max-width: 1200px) {
.home-page-food-count-container {
width: 40%;
}
.msg1{
margin-top: 15%;
margin-bottom: 20%;
font-size: 55px;
}
.carousels{
width: 100%;

}
.slideshow-container{
width: 100%;
display: flex;
justify-content: center;
}
.slides{
height: 25rem;
}
.msg2{
margin-top: 26%;
font-size: 2.5rem;
font-weight: bold;
}
.home-page-cards {
/* display: block; */
text-align:center;
width:25%;
height: 10%;
/* display: flex;
flex-direction: column;
justify-content: center;
align-items: center; */
margin-bottom: 10%;
padding: 0% 1.1%;
}
.high{
margin-bottom: 2%;
}
.expiration-number {
font-size: 2.5rem;
/* margin: 0; */
/* margin-bottom: 0rem; */
font-weight: normal;
}

.expiration-message {
color: black;
font-size: 1.7rem;
/* margin: 0; */
margin-bottom: 1rem;
font-weight: normal;
}
/* .expire-content{
display: flex;
flex-direction: row;
justify-content: center;
} */
.msghindi{
font-size: 2rem;
}
}
Loading

0 comments on commit 805517e

Please sign in to comment.