Skip to content

fix: Page responsiveness #37

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

Merged
merged 13 commits into from
Jul 27, 2024
Merged

fix: Page responsiveness #37

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
dd252ac
fix: Mobile responsiveness for 430px and smaller
carsonSgit Jul 27, 2024
b8319a6
fix: Font size improvements on 430px
carsonSgit Jul 27, 2024
5fa5720
fix: Container responsiveness for 390px
carsonSgit Jul 27, 2024
0aaaa95
fix: 390px font size
carsonSgit Jul 27, 2024
0a8df2e
fix: 414px resolution
carsonSgit Jul 27, 2024
1dd1960
fix: 375px responsive
carsonSgit Jul 27, 2024
c583318
fix: 375px font size increase
carsonSgit Jul 27, 2024
5d5158b
fix: 360px font size improvements
carsonSgit Jul 27, 2024
92e35a0
fix: 768px responsiveness
carsonSgit Jul 27, 2024
ae6432d
fix: Overall responsiveness using the Google Responsiveness tool
carsonSgit Jul 27, 2024
a3ee6f1
fix: Proper Project responsiveness layout
carsonSgit Jul 27, 2024
b647157
fix: Project responsiveness Sub-1200px
carsonSgit Jul 27, 2024
42329ea
fix: Improve responsiveness of projects for all screen sizes
carsonSgit Jul 27, 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
105 changes: 105 additions & 0 deletions src/Components/Home/Hero/Hero.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,11 @@ $font-color: #a2aa94;
@media (max-width: 1200px) {
flex-direction: row;
}

@media (max-width: 430px) {
display: flex;
flex-direction: column;
}
}

/* Left Container */
Expand Down Expand Up @@ -52,6 +57,22 @@ $font-color: #a2aa94;
flex: 0 0 60%;
padding: 210px 0px 0px 40px; /* top, right, bottom, left */
}

@media (max-width: 430px){
flex: 0 0 50%;
padding: 60px 40px 0px 40px; /* top, right, bottom, left */
}

@media (max-width: 414px) {
flex: 0 0 50%;
padding: 30px 40px 0px 40px; /* top, right, bottom, left */
}

@media (max-width: 375px) {
flex: 0 0 55%;
padding: 20px 40px 0px 40px; /* top, right, bottom, left */
}

}

/* Right Container */
Expand All @@ -78,6 +99,35 @@ $font-color: #a2aa94;
margin-left: -100px;
margin-top: -190px;
}

@media (max-width: 430px) {
flex: 0 0 50%;
margin-left: 10px;
margin-top: -210px;
}

@media (max-width: 390px) {
flex: 0 0 50%;
margin-left: 10px;
margin-top: -190px;
}

@media (max-width: 414px) {
flex: 0 0 50%;
margin-left: 10px;
margin-top: -200px;
}

@media (max-width: 375px) {
margin-left: 10px;
margin-top: -290px;
}

@media (max-width: 360px) {
flex: 0 0 100%;
margin-left: 10px;
margin-top: -350px;
}
}

/* Text Styling */
Expand Down Expand Up @@ -157,3 +207,58 @@ p {
font-size: 1.5em;
}
}

@media (max-width: 430px) {
h1 {
font-size: 3.2em;
margin-bottom: -0.2em;
}

p {
font-size: 1.3em;
}
}

@media (max-width: 390px) {
h1 {
font-size: 2.9em;
margin-bottom: -0.2em;
}

p {
font-size: 1.2em;
}
}

@media (max-width: 414px) {
h1 {
font-size: 2.9em;
margin-bottom: -0.2em;
}

p {
font-size: 1.3em;
}
}

@media (max-width: 375px) {
h1 {
font-size: 2.7em;
margin-bottom: -0.2em;
}

p {
font-size: 1.2em;
}
}

@media (max-width: 360px){
h1 {
font-size: 2.5em;
margin-bottom: -0.2em;
}

p {
font-size: 1.1em;
}
}
49 changes: 33 additions & 16 deletions src/Components/Projects/Projects.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,24 +22,32 @@ a {
min-height: 100vh;
text-align: center;

@media (min-width: 768px) {
padding: 0px 40px;
@media (min-width: 768px) and (max-width: 1200px) {
padding: 0px 30px;
margin-left: 0;
}

@media (max-width: 1200px) {
margin-left: -120px;
@media (min-width: 1200px) {
padding: 0px 40px;
margin-left: 0;
}

@media (max-width: 992px) {
margin-left: -100px;
@media (max-width: 767px) {
padding: 0px 10px;
margin-left: 0;
}
}

.ProjectsTitle {
font-size: 2.8em;
margin-bottom: 40px;
color: $text-color;

@media (min-width: 768px) {
@media (min-width: 768px) and (max-width: 1200px) {
font-size: 3.5em;
}

@media (min-width: 1200px) {
font-size: 4.5em;
}
}
Expand All @@ -58,10 +66,13 @@ a {
background-clip: text;
-webkit-background-clip: text;
animation: gradientAnimation 5s ease infinite;

font-size: inherit;

@media (min-width: 768px) {
@media (min-width: 768px) and (max-width: 1200px) {
font-size: inherit;
}

@media (min-width: 1200px) {
font-size: inherit;
}
}
Expand All @@ -83,8 +94,7 @@ a {
flex-direction: column;
align-items: center;
margin-bottom: 20px;
width: 75em;
height: 35em;
width: 90%;
background-size: cover;
background-position: center;
border-radius: 15px;
Expand All @@ -102,17 +112,24 @@ a {
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.417);
}

@media (min-width: 768px) and (max-width: 1200px) {
height: auto;
min-height: 400px;
}

@media (min-width: 1200px) {
width: 75%;
height: auto;
min-height: 500px;
margin-left: 0;
}

@media (max-width: 767px) {
width: 90%;
height: auto;
background-size: cover;
min-height: 200px;
}

@media (max-width: 1200px) {
width: 45em;
height: 25em;
}
}

.ProjectContent {
Expand Down