hiepht/PresentCorpo
0
0
Fork 0
forked from MinhQuan/PresentCorpo
Code Pull Requests Activity

Fix: Resolve responsive layout issues on contact page

Browse Source
This commit is contained in:
hiep200311
2026-06-04 09:29:35 +07:00
parent 3e515182e1
commit c75e660e20
2 changed files with 122 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files
views/contactPages/contactMain.css
+29 -19
View File
@@ -35,10 +35,7 @@ a:active {
/* Contact Section */
.contact-section {
padding: 60px 5%;
background-color: #f9f9f9;
max-width: 1400px;
margin: 0 auto;
}
.page-intro {
@@ -60,19 +57,18 @@ a:active {
}
.contact-container {
display: flex;
gap: 40px;
margin-top: 30px;
}
/* Enhanced Form Container */
.contact-form {
flex: 1;
background-color: white;
padding: 35px;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
position: relative;
overflow: hidden;
}
@@ -303,7 +299,9 @@ a:active {
border-radius: 50%;
transform: scale(0);
opacity: 0;
transition: transform 0.6s, opacity 0.6s;
transition:
transform 0.6s,
opacity 0.6s;
}
.submit-button:hover::after {
@@ -313,14 +311,17 @@ a:active {
/* Contact Details Section */
.contact-details {
flex: 1;
background-color: white;
padding: 35px;
border-radius: 12px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
position: relative;
overflow: hidden;
display: flex;
flex-direction: column;
}
.contact-details::before {
@@ -380,7 +381,9 @@ a:active {
color: #30875f;
margin-right: 15px;
margin-top: 3px;
transition: color 0.3s, transform 0.3s;
transition:
color 0.3s,
transform 0.3s;
}
.contact-item:hover i {
@@ -428,8 +431,18 @@ a:active {
border-radius: 12px;
overflow: hidden;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease, box-shadow 0.3s ease;
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
position: relative;
flex-grow: 1;
display: flex;
flex-direction: column;
}
.map-container iframe {
flex-grow: 1;
height: 100% !important;
min-height: 250px;
}
.map-container:hover {
@@ -488,7 +501,8 @@ a:active {
/* Responsive Design */
@media (max-width: 1200px) {
.contact-section {
padding: 50px 4%;
padding-top: 50px;
padding-bottom: 50px;
}
.contact-form,
@@ -514,13 +528,8 @@ a:active {
}
@media (max-width: 768px) {
.contact-container {
flex-direction: column;
}
.contact-form,
.contact-details {
width: 100%;
padding: 25px;
}
@@ -557,7 +566,8 @@ a:active {
@media (max-width: 576px) {
.contact-section {
padding: 40px 15px;
padding-top: 40px;
padding-bottom: 40px;
}
.page-intro {