Skip to content

Commit fbb9d81

Browse files
guru2001guru2001
committed
Improve Responsiveness
1 parent 58c121e commit fbb9d81

File tree

2 files changed

+26
-25
lines changed

2 files changed

+26
-25
lines changed

‎src/components/mmmt.js‎

Lines changed: 18 additions & 18 deletions
Original file line numberDiff line numberDiff line change
@@ -125,7 +125,7 @@ const Mmmt = () =>
125125
<img
126126
class="myImg"
127127
src={JJ_Aucouturier}
128-
style={{ width: 200, hegiht: 200 }}
128+
style={{ width: 250 }}
129129
onClick={(event) => showModal(event, JJ_Aucouturier)}
130130
/>
131131
</div>
@@ -149,7 +149,7 @@ const Mmmt = () =>
149149
alignItems: "center",
150150
}}
151151
>
152-
<div className="flex md:flex-row flex-col flex-wrap gap-x-10 gap-y-10 md:gap-x-64 p-5">
152+
<div className="flex md:flex-row flex-col flex-wrap gap-x-10 gap-y-10 md:gap-x-32 p-5">
153153
<div className="flex-col flex items-center justify-center space-y-3">
154154
<p className="text-lg">
155155
<span className="text-[#d83616]">
@@ -165,7 +165,7 @@ const Mmmt = () =>
165165
<img
166166
class="myImg"
167167
src={Kat_Agres}
168-
style={{ width: 200, hegiht: 200 }}
168+
style={{ width: 250 }}
169169
onClick={(event) => showModal(event, Kat_Agres)}
170170
/>
171171
</div>
@@ -187,7 +187,7 @@ const Mmmt = () =>
187187
<img
188188
class="myImg"
189189
src={Coming_soon}
190-
style={{ width: 200, hegiht: 200 }}
190+
style={{ width: 250 }}
191191
onClick={(event) => showModal(event, Coming_soon)}
192192
/>
193193
</div>
@@ -212,7 +212,7 @@ const Mmmt = () =>
212212
alignItems: "center",
213213
}}
214214
>
215-
<div className="flex md:flex-row flex-col flex-wrap gap-x-10 gap-y-5 md:gap-x-64 p-5">
215+
<div className="flex md:flex-row flex-col flex-wrap gap-x-10 gap-y-5 md:gap-x-32 p-5">
216216
<div className="flex-col flex items-center justify-center space-y-3">
217217
<p className="text-lg">
218218
<span className="text-[#d83616]">
@@ -234,7 +234,7 @@ const Mmmt = () =>
234234
<img
235235
class="myImg"
236236
src={Nori_Jacoby}
237-
style={{ width: 200, hegiht: 200 }}
237+
style={{ width: 250 }}
238238
onClick={(event) => showModal(event, Nori_Jacoby)}
239239
/>
240240
</div>
@@ -253,7 +253,7 @@ const Mmmt = () =>
253253
<img
254254
class="myImg"
255255
src={Tuomas_Eerola}
256-
style={{ width: 200, hegiht: 200 }}
256+
style={{ width: 250 }}
257257
onClick={(event) => showModal(event, Tuomas_Eerola)}
258258
/>
259259
</div>
@@ -278,7 +278,7 @@ const Mmmt = () =>
278278
alignItems: "center",
279279
}}
280280
>
281-
<div className="flex md:flex-row flex-col flex-wrap gap-x-10 gap-y-5 md:gap-x-64 p-5">
281+
<div className="flex md:flex-row flex-col flex-wrap gap-x-10 gap-y-5 md:gap-x-32 p-5">
282282
<div className="flex-col flex items-center justify-center space-y-3">
283283
<p className="text-lg">
284284
<span className="text-[#d83616]">
@@ -296,7 +296,7 @@ const Mmmt = () =>
296296
<img
297297
class="myImg"
298298
src={Anja_Volk}
299-
style={{ width: 200, hegiht: 200 }}
299+
style={{ width: 250 }}
300300
onClick={(event) => showModal(event, Anja_Volk)}
301301
/>
302302
</div>
@@ -318,7 +318,7 @@ const Mmmt = () =>
318318
<img
319319
class="myImg"
320320
src={Petri_Toiviainen}
321-
style={{ width: 200, hegiht: 200 }}
321+
style={{ width: 250 }}
322322
onClick={(event) => showModal(event, Petri_Toiviainen)}
323323
/>
324324
</div>
@@ -343,7 +343,7 @@ const Mmmt = () =>
343343
alignItems: "center",
344344
}}
345345
>
346-
<div className="flex md:flex-row flex-col flex-wrap gap-x-10 gap-y-5 md:gap-x-64 p-5">
346+
<div className="flex md:flex-row flex-col flex-wrap gap-x-10 gap-y-5 md:gap-x-32 p-5">
347347
<div className="flex-col flex items-center justify-center space-y-3">
348348
<p className="text-lg">
349349
<span className="text-[#d83616]">
@@ -361,7 +361,7 @@ const Mmmt = () =>
361361
<img
362362
class="myImg"
363363
src={Martin_Clayton}
364-
style={{ width: 200, hegiht: 200 }}
364+
style={{ width: 250 }}
365365
onClick={(event) => showModal(event, Martin_Clayton)}
366366
/>
367367
</div>
@@ -383,7 +383,7 @@ const Mmmt = () =>
383383
<img
384384
class="myImg"
385385
src={Marcelo_Wanderley}
386-
style={{ width: 200, hegiht: 200 }}
386+
style={{ width: 250 }}
387387
onClick={(event) => showModal(event, Marcelo_Wanderley)}
388388
/>
389389
</div>
@@ -408,7 +408,7 @@ const Mmmt = () =>
408408
alignItems: "center",
409409
}}
410410
>
411-
<div className="flex md:flex-row flex-col flex-wrap gap-x-10 gap-y-5 md:gap-x-64 p-5">
411+
<div className="flex md:flex-row flex-col flex-wrap gap-x-10 gap-y-5 md:gap-x-32 p-5">
412412
<div className="flex-col flex items-center justify-center space-y-3">
413413
<p className="text-lg">
414414
<span className="text-[#d83616]">
@@ -423,7 +423,7 @@ const Mmmt = () =>
423423
<img
424424
class="myImg"
425425
src={Blair_Kaneshiro}
426-
style={{ width: 200, hegiht: 200 }}
426+
style={{width: 250}}
427427
onClick={(event) => showModal(event, Blair_Kaneshiro)}
428428
/>
429429
</div>
@@ -445,7 +445,7 @@ const Mmmt = () =>
445445
<img
446446
class="myImg"
447447
src={Peter_Keller}
448-
style={{ width: 200, hegiht: 200 }}
448+
style={{width: 250}}
449449
onClick={(event) => showModal(event, Peter_Keller)}
450450
/>
451451
</div>
@@ -474,7 +474,7 @@ const Mmmt = () =>
474474
<table className="table w-full">
475475
<tbody>
476476
<tr className="">
477-
<th className="bg-gray-400">CATEGORY</th>
477+
<th className="bg-gray-400" >CATEGORY</th>
478478
<th className="bg-gray-400" colSpan={3}>
479479
Prices in INR, exclusive of 18% GST
480480
</th>
@@ -629,4 +629,4 @@ const Mmmt = () =>
629629
);
630630
};
631631

632-
export default Mmmt;
632+
export default Mmmt;

‎src/styles/global.css‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -14,8 +14,8 @@
1414
}
1515

1616
.myImg:hover {
17-
transform: scale(2.5);
18-
overflow: hidden;
17+
transform: scale(2);
18+
/* overflow: hidden; */
1919
}
2020
.NewImg {
2121
width: 100vw;
@@ -52,21 +52,22 @@ html {
5252

5353
.modalcss {
5454
position: fixed; /* Stay in place */
55-
z-index: 1; /* Sit on top */
56-
padding-top: 100px; /* Location of the box */
55+
z-index: 100; /* Sit on top */
56+
padding-top: 50px; /* Location of the box */
5757
left: 0;
5858
top: 0;
5959
width: 100%; /* Full width */
6060
height: 100%; /* Full height */
6161
overflow: auto; /* Enable scroll if needed */
62+
6263
background-color: rgb(0, 0, 0); /* Fallback color */
6364
background-color: rgba(0, 0, 0, 0.9); /* Black w/ opacity */
6465
}
6566

6667
/* Modal Content (image) */
6768
.modal-content {
6869
margin: auto;
69-
display: block;
70+
display: block;
7071
width: 80%;
7172
max-width: 700px;
7273
}
@@ -99,7 +100,7 @@ html {
99100

100101
/* The Close Button */
101102
.close {
102-
position: absolute;
103+
position: fixed;
103104
top: 15px;
104105
right: 35px;
105106
color: #f1f1f1;
@@ -120,4 +121,4 @@ html {
120121
.modal-content {
121122
width: 100%;
122123
}
123-
}
124+
}

0 commit comments

Comments
 (0)