Skip to content

Commit 6d50f0a

Browse files
josueJUREjosueJURE
authored
Merge pull request fac29b#45 from fac29b/responsiveness
Responsiveness
2 parents 0405d2c + 35283af commit 6d50f0a

2 files changed

Lines changed: 48 additions & 39 deletions

File tree

‎public/index.css‎

Lines changed: 25 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -17,8 +17,9 @@
1717
.main-element {
1818
overflow: scroll;
1919
min-height: 100vh;
20-
width: 500px;
21-
border: black 1px solid;
20+
width: 100%;
21+
max-width: 500px;
22+
border: black 3px solid;
2223
border-radius: 5%;
2324
background-image: url("./image/Designer_2.png");
2425
background-image: linear-gradient(rgba(0, 0, 0, 0.3), rgba(0, 0, 0, 0.3)),
@@ -29,6 +30,7 @@
2930
top: 50%;
3031
left: 50%;
3132
transform: translate(-50%,-50%);
33+
margin: 0 auto;
3234
}
3335

3436
.preserve-line-breaks {
@@ -59,20 +61,23 @@ main {
5961

6062

6163
#background-img {
62-
background-color: blue;
6364
z-index: -2;
6465
position: absolute;
6566
top: 50%;
6667
left: 50%;
67-
transform: translate(-50%,-50%);
68-
right: 0;
69-
bottom: 0;
70-
width: 500px;
68+
transform: translate(-50%, -50%);
69+
width: 100%;
70+
height: 100%;
71+
max-width: 500px;
7172
min-height: 100vh;
7273
border-radius: 5%;
73-
border: 4px black solid;
74+
border: 2px solid black;
75+
background-image: url("./image/Designer_2.png");
76+
background-size: cover;
77+
background-position: center;
7478
}
7579

80+
7681
h1 {
7782
/* text-wrap: balance; */
7883
text-align: center;
@@ -114,8 +119,9 @@ button {
114119

115120
.send-recipe-to-user-inbox,
116121
.want-another-recipe {
117-
width: 200px;
122+
width: 170px;
118123
margin: auto;
124+
display: none;
119125
}
120126

121127
.email-section {
@@ -153,19 +159,19 @@ button {
153159
transition: background-color 0.5s ease;
154160
margin-top: 260px;
155161
margin-bottom: 20px;
156-
/* display: none; */
162+
display: none;
157163
}
158164

159165
/* The switch - the box around the slider */
160166
.switch {
161167
position: relative;
162-
display: inline-block;
168+
display: block;
163169
width: 60px;
164170
height: 34px;
165-
margin-left: 235px;
166-
margin-top: 10px;
171+
margin: 10px auto;
167172
}
168173

174+
169175
/* Hide default HTML checkbox */
170176
.switch input {
171177
opacity: 0;
@@ -263,3 +269,9 @@ input:checked + .slider:before {
263269
transform: rotate(360deg);
264270
}
265271
}
272+
@media only screen and (max-width: 768px) {
273+
.main-element {
274+
width: 100%; /* Adjusted width for smaller screens */
275+
max-width: none;
276+
}
277+
}

‎public/index.html‎

Lines changed: 23 additions & 26 deletions
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,7 @@
33
<head>
44
<meta charset="UTF-8" />
55
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6-
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta name="viewport" content="width=device-width" />
77
<link rel="stylesheet" href="index.css" />
88
<title>Recipe For Success</title>
99
<link rel="preconnect" href="https://fonts.googleapis.com" />
@@ -97,37 +97,34 @@ <h1 aria-label="app text" class="headline">
9797
<div id="loading-indicator"></div>
9898
<h3 id="loading-text">Creating Recipe...</h3>
9999
</div>
100-
101-
102100

103101
<!-- <label for="user-email">Enter you email address</label> -->
104102
<button class="try-again-btn">Try again</button>
105103
</main>
106104
<div class="test">
107105
<section
108-
aria-label="gpt-response"
109-
class="gpt-response preserve-line-breaks"
110-
></section>
111-
<button class="want-another-recipe">I want another recipe</button>
112-
<button
113-
class="send-recipe-to-user-inbox"
114-
name="do_we_email_user"
115-
value="false"
116-
>
117-
send recipe to my in
118-
</button>
119-
<section class="email-section">
120-
<input
121-
type="email"
122-
id="user-email"
123-
class=""
124-
name="user_email_address"
125-
placeholder="sophie@example.com"
126-
/>
127-
<i class="fa fa-paper-plane" aria-hidden="true" fa-lg></i>
128-
<!-- <button class="send-email-btn">send</button> -->
129-
</section>
130-
106+
aria-label="gpt-response"
107+
class="gpt-response preserve-line-breaks"
108+
></section>
109+
<button class="want-another-recipe">I want another recipe</button>
110+
<button
111+
class="send-recipe-to-user-inbox"
112+
name="do_we_email_user"
113+
value="false"
114+
>
115+
send recipe to my in
116+
</button>
117+
<section class="email-section">
118+
<input
119+
type="email"
120+
id="user-email"
121+
class=""
122+
name="user_email_address"
123+
placeholder="sophie@example.com"
124+
/>
125+
<i class="fa fa-paper-plane" aria-hidden="true" fa-lg></i>
126+
<!-- <button class="send-email-btn">send</button> -->
127+
</section>
131128
</div>
132129
</div>
133130
<script src="index.js"></script>

0 commit comments

Comments
 (0)