Skip to content

Commit

Permalink
Fix responsive layout issues
Browse files Browse the repository at this point in the history
  • Loading branch information
@aelassas
aelassas committed Dec 14, 2024
1 parent 1af9aaa commit 76b7407
Show file tree
Hide file tree
Showing 2 changed files with 29 additions and 143 deletions.
15 changes: 15 additions & 0 deletions frontend/src/assets/css/common.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -224,7 +224,22 @@ div.content {
background-color: #FAFAFA;
}

@media only screen and (width <=550px) {
.search-dialog-content {
width: calc(100%- 20px);
max-width: 480px;
}
}

@media only screen and (width <=960px) and (width >550px) {
.search-dialog-content {
width: 480px;
overflow-x: hidden;
}
}

@media only screen and (width <=960px) {

.buttons {
margin-top: 15px;
margin-bottom: 5px;
Expand Down
157 changes: 14 additions & 143 deletions frontend/src/assets/css/home.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -73,9 +73,8 @@ div.home div.home-content::after {
width: 100%;
top: 0;
left: 0;
/* background: #321807;
opacity: 0.5; */
background: #003B95;
background: #321807;
opacity: 0.5;
z-index: -1;
}

Expand All @@ -92,27 +91,18 @@ div.home div.home-cover {
color: #fff;
text-align: center;
-webkit-font-smoothing: antialiased;
letter-spacing: .095rem;
letter-spacing: .065rem;
padding: 0 20px;
}

div.home-subtitle {
color: #fff;
font-size: 28px;
padding-top: 10px;
font-weight: 400;
padding: 10px;
text-align: center;
}

div.home div.home-cover,
div.home-subtitle {
font-family: "Blue Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol" !important;
font-size: 26px;
}

div.home div.search {
z-index: 2;
background-color: #FFF;
background-color: #fff;
width: 100%;
display: flex;
flex-direction: column;
Expand All @@ -130,51 +120,8 @@ div.home div.search div.home-search {
width: fit-content;
}

div.home div.search div.search-header {
height: 52px;
/* width: calc(100% + 28px); */
width: calc(100% + 18px);
background-color: #003B95;
/* background-color: #006CE4; */
/* margin: -17px 0 20px 0; */
margin: -19px 0 20px 0;
border-radius: 5px;
content: '';
display: flex;
flex-direction: row;
align-items: center;
justify-content: center;
}

div.home div.search div.search-header .search-icon-btn {
display: flex;
flex-direction: column;
align-items: center;
color: #FFF;
margin: 0 5px;
width: 38px;
}

div.home div.search div.search-header .search-icon {
font-size: 28px;
}

div.home div.search div.search-header .search-icon-btn:hover>*,
div.home div.search div.search-header .search-icon-selected {
color: #FFB700;
}

div.home div.search div.search-header .search-icon-btn:hover>svg {
font-size: 32px;
}

div.home div.search div.search-header .search-icon-btn span {
font-size: 11px;
font-weight: 300;
}

div.home div.why {
background-color: #FFF;
background-color: #fff;
width: 100%;
padding: 40px 0;
display: flex;
Expand Down Expand Up @@ -206,7 +153,6 @@ div.home div.why div.why-boxes div.why-box div.why-icon-wrapper {

div.home div.why div.why-boxes div.why-box div.why-icon-wrapper .why-icon {
font-size: 48px;
/* color: #003B95; */
}

div.home div.why div.why-boxes div.why-box div.why-text-wrapper {
Expand All @@ -217,7 +163,6 @@ div.home div.why div.why-boxes div.why-box div.why-text-wrapper {
div.home div.why div.why-boxes div.why-box div.why-text-wrapper span.why-title {
font-weight: bold;
margin-bottom: 5px;
/* color: #003B95; */
}

div.home div.services {
Expand Down Expand Up @@ -269,12 +214,6 @@ div.home div.services div.services-boxes div.services-box div.services-text-wrap
margin-bottom: 15px;
}

div.home div.home-suppliers-static {
width: 100%;
max-width: 840px;
margin: 20px 0;
}

div.home div.home-suppliers {
width: 80%;
margin: 20px 0;
Expand Down Expand Up @@ -380,55 +319,9 @@ div.home div.car-size div.boxes div.box div.car-size-action .btn-car-size {
width: 100%;
}

div.home div.blog {
padding: 50px 0 100px 0;
}

div.home div.blog h1 {
font-weight: 500;
padding: 0 10px;
text-align: center;
}

div.home div.blog div.blog-posts {
display: grid;
grid-template-columns: auto auto auto;
}

div.home div.blog div.blog-posts div.blog-post {
display: flex;
flex-direction: column;
width: 326px;
margin: 10px 30px 10px 0;
border-radius: 4px;
overflow: hidden;
}

div.home div.blog div.blog-posts div.blog-post img {
width: 100%;
height: 200px;
object-fit: cover;
}

div.home div.blog div.blog-posts div.blog-post h1 {
min-height: 108px;
font-size: 24px;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
}

div.home div.blog div.blog-posts div.blog-post p {
min-height: 144px;
display: -webkit-box;
-webkit-line-clamp: 6;
-webkit-box-orient: vertical;
word-break: break-word;
overflow: hidden;
text-overflow: ellipsis;
div.home div.home-map {
width: 80%;
margin: 15px 0 30px;
}

div.home div.faq {
Expand All @@ -439,11 +332,6 @@ div.home div.faq {
align-items: center;
}

div.home div.home-map {
width: 80%;
margin: 15px 0 30px;
}

div.home div.customer-care {
background-color: #f9f9f9;
width: 100%;
Expand Down Expand Up @@ -483,8 +371,6 @@ div.home div.customer-care div.customer-care-text div.customer-care-boxes div.cu
}

div.home div.customer-care div.customer-care-text div.customer-care-boxes .customer-care-icon {
/* color: #006CE4; */
color: #003B95;
margin-right: 10px;
}

Expand Down Expand Up @@ -515,10 +401,6 @@ div.home div.customer-care div.customer-care-img img {
margin-bottom: 20px;
}

div.home-subtitle {
font-size: 22px;
}

div.home-cover {
font-size: 40px;
font-weight: 800;
Expand All @@ -528,10 +410,8 @@ div.home div.customer-care div.customer-care-img img {
div.home div.search div.home-search {
padding: 20px 10px;
margin: -187px 20px 0 20px;
}

div.home div.home-suppliers-static {
width: calc(100% - 40px)
width: calc(100% - 20px);
max-width: 480px;
}

div.home div.why div.why-boxes,
Expand All @@ -549,15 +429,6 @@ div.home div.customer-care div.customer-care-img img {
margin-bottom: 30px;
}

div.home div.blog div.blog-posts {
display: flex;
flex-direction: column;
}

div.home div.blog div.blog-posts div.blog-post {
margin-bottom: 40px;
}

div.home div.home-map {
width: 100%;
padding: 5px;
Expand Down Expand Up @@ -591,13 +462,13 @@ div.home div.customer-care div.customer-care-img img {
}

div.home div.home-cover {
font-size: 68px;
font-weight: 800;
font-size: 47px;
font-weight: 700;
margin-bottom: 5px;
}

div.home div.search div.home-search {
padding: 20px 10px;
padding: 20px;
margin-top: -75px;
}

Expand Down

0 comments on commit 76b7407

Please sign in to comment.