diff --git a/src/components/Experiences/Experiences.css b/src/components/Experiences/Experiences.css index b85094f..88029e3 100644 --- a/src/components/Experiences/Experiences.css +++ b/src/components/Experiences/Experiences.css @@ -7,7 +7,7 @@ } .experiences-container { - width: 50%; + width: 100%; position: relative; display: flex; flex-direction: column; @@ -23,3 +23,15 @@ height: 100%; background-color: rgba(176, 176, 176, 0.2); } + +@media (max-width: 768px) { + .experiences-container { + width: 90%; + align-items: flex-start; + margin-right: 20px; + } + + .experiences-container::before { + left: 20px; + } +} \ No newline at end of file diff --git a/src/components/SingleExperience/SingleExperience.css b/src/components/SingleExperience/SingleExperience.css index 1b55902..824affd 100644 --- a/src/components/SingleExperience/SingleExperience.css +++ b/src/components/SingleExperience/SingleExperience.css @@ -4,6 +4,8 @@ margin-bottom: 3rem; padding: 1.5rem; display: flex; + gap: 6rem; + justify-content: center; } .experience-card::before { @@ -21,18 +23,17 @@ .experience-card-left { - width: 50%; + width: 25%; text-align: end; - margin-right: 8rem; } .experience-card-right { - width: 50%; + width: 25%; } .experience-company { color: var(--important-color); - font-size: 1.2rem; + font-size: 1.5rem; margin: 0; } @@ -74,4 +75,25 @@ font-weight: bold; font-size: 1.2rem; line-height: 1; +} + + + +@media (max-width: 768px) { + .experience-card{ + display: flex; + flex-direction: column; + gap: 0; + } + .experience-card::before { + left: 20px; + top: 31px; + } + .experience-card-left, .experience-card-right{ + width: fit-content; + margin-left: 20px; + } + .experience-card-left{ + text-align: left; + } } \ No newline at end of file diff --git a/src/index.css b/src/index.css index 8e6af21..6c260b1 100644 --- a/src/index.css +++ b/src/index.css @@ -9,6 +9,7 @@ html{ scroll-behavior: smooth; + overflow-x: hidden; } @@ -16,6 +17,7 @@ body { margin: 0; display: flex; place-items: center; + overflow-x: hidden; } .section-title {