Skip to content

Commit b35422d

Browse files
arkasharmaarkasharma
committed
Fixed eventPage rendering on mobile and mid-size screens
1 parent d339a04 commit b35422d

File tree

3 files changed

+167
-62
lines changed

3 files changed

+167
-62
lines changed

‎components/EventCard.tsx‎

Lines changed: 31 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10,16 +10,43 @@ interface CardInterface {
1010
img: string;
1111
}
1212
function EventCard({ header, body, time, img }: CardInterface) {
13+
// Only show image if it's not a default or empty value
14+
const hasImage = img && !img.includes('default');
1315
return (
1416
<div className={styles.container}>
1517
<div className={styles.text}>
1618
<div className={styles.header}>{header}</div>
17-
<div className={styles.body}>
18-
<div className={styles.description} style={{ flex: '1' }}>{body}</div>
19-
<Image src={img} width={300} height={300} />
19+
<div
20+
className={
21+
hasImage ? styles.body : `${styles.body} ${styles['no-image']}`
22+
}
23+
>
24+
{hasImage ? (
25+
<>
26+
<div className={styles['event-image-wrapper']}>
27+
<Image
28+
src={img}
29+
width={300}
30+
height={300}
31+
className={styles['event-image']}
32+
alt={header}
33+
/>
34+
</div>
35+
<div className={styles['body-text']}>{body}</div>
36+
</>
37+
) : (
38+
<div className={styles['body-text'] + ' ' + styles['full-width']}>
39+
{body}
40+
</div>
41+
)}
2042
</div>
2143
<div className={styles.time}>
22-
<Image src="/icons8-calendar-24.png" width={20} height={20} />
44+
<Image
45+
src="/icons8-calendar-24.png"
46+
width={20}
47+
height={20}
48+
alt="calendar icon"
49+
/>
2350
<div>&nbsp;{time}</div>
2451
</div>
2552
</div>

‎styles/EventCard.module.scss‎

Lines changed: 88 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,11 @@
11
@use "../styles/global_variables.module.scss" as vars;
22

33
.container {
4-
display: block;
4+
display: inline-block;
55
position: relative;
6-
margin: 2rem 4rem;
6+
margin: 2rem, 4rem;
77
width: 100%;
8-
min-height: 100px;
8+
min-height: 100;
99
border-radius: 15px;
1010
box-shadow: 0 0 10px 4px #f5f0f0;
1111
}
@@ -27,10 +27,18 @@
2727
/* Your two-column area with image + details */
2828
.body {
2929
display: flex;
30-
gap: 4rem;
3130
overflow-wrap: break-word;
3231
font-size: 0.9rem;
33-
align-items: flex-start;
32+
background: #fff;
33+
gap: 1rem;
34+
}
35+
36+
.body img {
37+
width: 100%;
38+
max-width: 100%;
39+
height: auto;
40+
margin: 0;
41+
border-radius: 10px;
3442
}
3543

3644
.time {
@@ -42,67 +50,101 @@
4250
margin-top: 15px;
4351
}
4452

45-
/* Primary image rule */
46-
.image {
53+
.event-image-wrapper {
54+
flex: 0 0 30%;
55+
max-width: 30%;
56+
display: flex;
57+
align-items: center;
58+
justify-content: center;
59+
margin-bottom: 0;
60+
background: #fff;
61+
}
62+
63+
.event-image {
4764
width: 100%;
48-
max-width: 100%;
4965
height: auto;
50-
aspect-ratio: 16 / 9;
51-
object-fit: cover;
52-
object-position: center;
66+
object-fit: contain;
5367
border-radius: 10px;
5468
display: block;
69+
}
5570

56-
/* ✅ critical: never let flex collapse the image to a vertical bar */
57-
flex-shrink: 0;
71+
.body-text {
72+
flex: 1 1 70%;
73+
max-width: 70%;
74+
display: flex;
75+
align-items: center;
76+
color: #000;
5877
}
5978

60-
/* ✅ Fallback: hit any <img> inside the card even if className isn't present */
61-
.container img {
62-
width: 100%;
79+
.full-width {
80+
flex: 1 1 100%;
6381
max-width: 100%;
64-
height: auto;
65-
object-fit: cover;
66-
object-position: center;
67-
border-radius: 10px;
68-
display: block;
6982
}
7083

84+
@media (max-width: 1024px) {
85+
.body {
86+
display: flex;
87+
flex-direction: row;
88+
align-items: center;
89+
gap: 1rem;
90+
}
7191

72-
@media (max-width: 1600px) {
73-
.body { display: inline; }
74-
}
92+
.event-image-wrapper {
93+
flex: 0 0 30%;
94+
max-width: 30%;
95+
}
7596

76-
/* --- Mobile rules --- */
77-
@media (max-width: 900px) {
78-
/* Keep layout/border; just ensure vertical stacking space is fine */
79-
.container { margin: 1rem 1rem; }
97+
.body-text,
98+
.full-width {
99+
flex: 1 1 70%;
100+
max-width: 70%;
101+
}
80102

81-
.description {
82-
display: none !important;
103+
.no-image .body-text,
104+
.no-image .full-width {
105+
flex: 1 1 100% !important;
106+
max-width: 100% !important;
107+
width: 100% !important;
108+
display: block !important;
83109
}
110+
}
84111

85-
/* If you can't add .description in markup, this is a safe alternative:
86-
keep .body but switch it to column so the image stays visible. */
112+
@media (max-width: 768px) {
87113
.body {
88-
display: flex;
89114
flex-direction: column;
90-
gap: 0.75rem;
115+
align-items: stretch;
116+
gap: 1rem;
117+
}
118+
119+
.body img {
120+
max-width: 85%;
121+
margin-bottom: 1rem;
122+
}
123+
124+
.event-image {
125+
width: 100%;
126+
max-width: 85%;
127+
}
128+
129+
.event-image-wrapper {
130+
flex: none;
131+
max-width: 100%;
132+
width: 100%;
91133
}
92134

93-
.header {
94-
font-size: 1.0rem;
95-
line-height: 1.4;
96-
margin-top: 0.5rem;
135+
.body-text,
136+
.full-width {
137+
flex: none !important;
138+
max-width: none !important;
139+
width: 100% !important;
140+
display: block !important;
141+
align-items: unset !important;
97142
}
143+
}
98144

99-
/* ✅ Force a visible image area on phones, no squish, no bar */
100-
.image,
101-
.container img {
102-
height: 180px; /* visible area */
103-
object-fit: cover; /* crop instead of stretch */
104-
object-position: center;
105-
margin-bottom: 0.5rem;
106-
flex-shrink: 0; /* do not collapse */
145+
@media (max-width: 500px) {
146+
.container {
147+
margin: 0.5rem;
148+
padding: 0.5rem;
107149
}
108150
}

‎styles/Events.module.scss‎

Lines changed: 48 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -95,24 +95,60 @@
9595
gap: 2rem;
9696
}
9797

98-
/* --- Mobile layout --- */
99-
@media (max-width: 900px) {
100-
.boardgrid,
101-
.past-events-grid {
102-
grid-template-columns: 1fr;
98+
@media (max-width: 1024px) {
99+
.card,
100+
.past-card {
101+
width: 100%;
102+
margin-left: 0;
103+
margin-right: 0;
103104
}
104105

105-
.card {
106-
max-width: 90%;
107-
margin: 0 auto;
106+
.events-section {
107+
max-width: 100%;
108+
}
109+
}
110+
111+
@media (max-width: 768px) {
112+
.main {
113+
padding: 1rem;
114+
}
115+
116+
.calendar-and-events-wrapper {
117+
flex-direction: column;
118+
gap: 1rem;
119+
align-items: stretch;
120+
}
121+
122+
.calendar-container,
123+
.events-section {
124+
flex: none;
125+
max-width: 100%;
126+
width: 100%;
127+
height: auto;
108128
}
109129

110130
.calendar-container iframe {
111-
min-height: 350px;
131+
height: 50vh;
112132
}
113133

114-
.description {
115-
font-size: 0.95rem;
134+
.events-section {
135+
max-width: 100%;
136+
padding: 0;
137+
height: auto;
116138
}
117-
}
118139

140+
.card {
141+
width: 100%;
142+
margin-left: 0;
143+
margin-right: 0;
144+
min-height: auto;
145+
}
146+
147+
.past-card {
148+
width: 100%;
149+
}
150+
151+
.past-events-grid {
152+
justify-content: center;
153+
}
154+
}

0 commit comments

Comments
 (0)