Skip to content

Commit

Permalink
responsive styling for case study section on Home page
Browse files Browse the repository at this point in the history
  • Loading branch information
ShravaniAK committed Jul 22, 2024
1 parent 3d8f6b2 commit 04513fa
Showing 1 changed file with 76 additions and 4 deletions.
80 changes: 76 additions & 4 deletions overrides/assets/stylesheets/home.css
Original file line number Diff line number Diff line change
Expand Up @@ -386,38 +386,43 @@ position: relative;
background-color: #f3f1f2;
padding: 1rem;
cursor: pointer;
flex-wrap: wrap;
padding-bottom: 4rem;
}

.case-studies-container h1 {
margin-bottom: 0.45em;
width: 100%;
}

.case-studies-container .cases-table {
display: flex;
justify-content: center;
max-width: 100%;
margin: 1rem;
align-items: center;
align-items: stretch;
}

.case-studies-container .cases-table a {
text-decoration: none;
cursor: pointer;
flex: 1 1 25vw;
min-width: 300px;
max-width: 25vw;
margin: 1rem;
}

.case-studies-container .cases-table .col {
background-color: white;
padding: 1.5rem;
margin: 1rem 0.5rem;
border-radius: 0.7rem;
width: 25vw;
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
box-sizing: border-box;
transition: border 0.3s ease-in-out;
border: 2px solid transparent;
height: 100%;
}

.case-studies-container .cases-table .col:hover {
Expand Down Expand Up @@ -456,6 +461,73 @@ position: relative;
margin: .4em 5em -4px 2em;
}

/* Responsive Styles */

@media (max-width: 1370px) {
.case-studies-container .cases-table a {
flex: 1 1 30vw;
min-width: 300px;
max-width: 30vw;
}
}

@media (max-width: 1200px) {
.case-studies-container .cases-table{
flex-wrap: wrap;
}
.case-studies-container .cases-table a {
flex: 1 1 40vw;
min-width: 300px;
max-width: 40vw;
}
}

@media (max-width: 992px) {
.case-studies-container .cases-table a {
flex: 1 1 50vw;
min-width: 300px;
max-width: 50vw;
}
}

@media (max-width: 800px) {
.case-studies-container .cases-table {

justify-content: center;
align-items: center;
max-width: 100%;
}
.case-studies-container .cases-table a {
display: flex;
flex: 1 1 90vw;
min-width: 350px;
max-width: 90vw;
justify-content: center;
margin:0.5rem auto;
}
}

@media (max-width: 576px) {
.case-studies-container .cases-table a {
flex: 1 1 90vw;
min-width: 500px;
max-width: 90vw;
}

.case-studies-container .logo {
padding: 0 1em;
padding-top: 1rem;
}

.case-studies-container hr {
margin: .4em 2em -4px 1em;
}

.case-studies-container .normal-text {
padding: 0 1em;
}
}

/* whats next container css */
.whats-next-container .component-flex {
display: flex;
Expand Down

0 comments on commit 04513fa

Please sign in to comment.