Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix responsive issue in scholarx/past-programs card-deck #1628

Merged
merged 12 commits into from
May 14, 2024
Merged

Fix responsive issue in scholarx/past-programs card-deck #1628

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
f815972
Update CNAME
mkskaushalya May 13, 2024
622960e
Fixed responsive issues in the scholarx/past-programs card deck by ad…
mkskaushalya May 14, 2024
c2f9efe
Merge branch 'master' of https://github.com/mkskaushalya/sef-site
mkskaushalya May 14, 2024
a29750a
Update CNAME
mkskaushalya May 14, 2024
ca64683
Update CNAME
mkskaushalya May 14, 2024
0928d95
Update CNAME
mkskaushalya May 14, 2024
7670274
Update scholarx/past-programs/style.css
mkskaushalya May 14, 2024
d6b201b
Update CNAME
mkskaushalya May 14, 2024
d178654
Increased padding and font sizes.
mkskaushalya May 14, 2024
5fb0cbd
Update scholarx/past-programs/style.css
mkskaushalya May 14, 2024
954592d
added min height for the card
mkskaushalya May 14, 2024
59cd649
Merge branch 'master' of https://github.com/mkskaushalya/sef-site
mkskaushalya May 14, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 5 additions & 11 deletions scholarx/past-programs/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -88,25 +88,24 @@ <h1 class="mb-0 text-onelive">Take a look at our past</h1>
<p class="display-3 text-onelive font-weight-bolder">ScholarX</p>
</div>
</div>
<div class="card-deck">
<div class="row">
<a href="2022" class="card col-md-4 shadow archive-card">
<div class="scholarx-card-deck">
<a href="2022" class="scholarx-card">
<img src="images/card-image.jpg" class="card-img card-template rounded-top25px" alt="2020">
<div class="card-body">
<h5 class="card-title">ScholarX 2022</h5>
<p class="card-text text-darker">In 2022, we reached new heights with 200+ Mentors and 250+ Mentees from all over.
We’re thrilled to have made a positive impact on so many individuals and look forward to continuing our mission.</p>
</div>
</a>
<a href="2021" class="card col-md-4 shadow archive-card">
<a href="2021" class="scholarx-card">
<img src="images/card-image.jpg" class="card-img card-template rounded-top25px" alt="2020">
<div class="card-body">
<h5 class="card-title">ScholarX 2021</h5>
<p class="card-text text-darker">In 2021 we took the program to a new height with 100+ Mentors and 250+ Mentees
touching every corner of the country and many other countries</p>
</div>
</a>
<a href="2020" class="card col-md-4 shadow archive-card">
<a href="2020" class="scholarx-card">
<img src="images/card-image.jpg" class="card-img card-template rounded-top25px" alt="2020">
<div class="card-body">
<h5 class="card-title">ScholarX 2020</h5>
Expand All @@ -115,9 +114,7 @@ <h5 class="card-title">ScholarX 2020</h5>
</p>
</div>
</a>
</div>
<div class="row mt-md-4">
<a href="2019" class="card col-md-4 shadow archive-card">
<a href="2019" class="scholarx-card">
<img src="images/card-image.jpg" class="card-img card-template rounded-top25px" alt="2019">
<div class="card-body">
<h5 class="card-title">ScholarX 2019</h5>
Expand All @@ -126,9 +123,6 @@ <h5 class="card-title">ScholarX 2019</h5>
</p>
</div>
</a>
<div class="col-md-4"></div>
<div class="col-md-4"></div>
</div>
</div>
</div>
</section>
Expand Down
71 changes: 71 additions & 0 deletions scholarx/past-programs/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,3 +2,74 @@
height: 140px;
object-fit: cover;
}

.scholarx-card-deck{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 15px;
}
.scholarx-card-deck .scholarx-card{
width: calc(100%/3 - 10px) !important;
display: flex;
flex-direction: column;
box-shadow: 0 15px 35px rgba(50, 50, 93, .1), 0 5px 15px rgba(0, 0, 0, .07) !important;
border-radius: 25px;
min-height: 325px;
}

.scholarx-card-deck .scholarx-card .card-img{
border-top-left-radius: 25px;
border-top-right-radius: 25px;
height: 100px;
object-fit: cover;
width: 100%;
border-bottom: 1px solid #f1f1f1;
}

.scholarx-card-deck .scholarx-card .card-body{
padding: 0 !important;
display: flex;
flex-direction: column;
padding: 20px !important;
gap: 10px;

}

.scholarx-card-deck .scholarx-card .card-body .card-title{
font-size: 1.3rem;
font-weight: 600;
color: #333;
margin-bottom: 0;
}

.scholarx-card-deck .scholarx-card .card-body .card-text{
font-size: 0.9rem;
color: #666;
margin-bottom: 0;
}

@media (max-width: 768px) {
.scholarx-card-deck .scholarx-card{
width: calc(100%/2 - 15px/2) !important;
gap: 0;
}

.scholarx-card-deck .scholarx-card .card-img{
height: 100px;
}

.scholarx-card-deck .scholarx-card .card-body .card-title{
font-size: 1.2rem;
}

.scholarx-card-deck .scholarx-card .card-body .card-text{
font-size: 0.85rem;
}
}

@media (max-width: 494px) {
.scholarx-card-deck .scholarx-card{
width: 100% !important;
}
}
Loading