Skip to content

Commit 599f7ed

Browse files
mgrinsteinmgrinstein
committed
fix: adjust components for small screens
1 parent 26a0614 commit 599f7ed

File tree

3 files changed

+120
-83
lines changed

3 files changed

+120
-83
lines changed

‎src/components/HomeComponent.css‎

Lines changed: 63 additions & 49 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,71 @@
11
@import '../styles/colors.css';
22

3-
/* Main container for AboutMe section */
3+
/* Main container for HomeComponent section */
44
.home-component-container {
5-
display: flex;
6-
align-items: center;
7-
justify-content: space-between;
8-
max-width: 1200px;
9-
margin: 30px auto;
10-
background-color: var(--antiflash-white);
11-
padding: 60px;
12-
}
13-
14-
/* Text section styling */
15-
.home-component-text {
16-
flex: 1;
17-
padding-right: 20px;
18-
}
19-
20-
.home-component-text h2 {
21-
color: var(--raisin-black);
22-
font-size: 1.5rem;
23-
font-weight: bold;
24-
}
25-
26-
.home-component-text p {
27-
color: var(--raisin-black);
28-
font-size: 1rem;
29-
line-height: 1.6;
30-
margin-top: 10px;
5+
display: flex;
6+
align-items: center;
7+
justify-content: space-between;
8+
max-width: 1200px;
9+
margin: 30px auto;
10+
background-color: var(--antiflash-white);
11+
padding: 60px;
12+
flex-wrap: wrap; /* Ensures the image and text stack on small screens */
13+
}
14+
15+
/* Text section styling */
16+
.home-component-text {
17+
flex: 1;
18+
padding-right: 20px;
19+
}
20+
21+
/* Heading styling */
22+
.home-component-text h2 {
23+
color: var(--raisin-black);
24+
font-size: 1.5rem;
25+
font-weight: bold;
26+
}
27+
28+
/* Paragraph styling */
29+
.home-component-text p {
30+
color: var(--raisin-black);
31+
font-size: 1rem;
32+
line-height: 1.6;
33+
margin-top: 10px;
34+
}
35+
36+
/* Photo section styling */
37+
.home-component-photo {
38+
width: 300px; /* Control the width of the photo */
39+
height: auto;
40+
flex-shrink: 0;
41+
margin-top: 20px; /* Adds margin above the image */
42+
}
43+
44+
/* Image styling */
45+
.home-component-photo img {
46+
width: 100%;
47+
height: auto;
48+
border-radius: 2px;
49+
border: 1px solid var(--raisin-black); /* Optional border for photo */
50+
object-fit: cover;
51+
}
52+
53+
/* Responsive Styles for Small Screens (max-width: 768px) */
54+
@media (max-width: 768px) {
55+
.home-component-container {
56+
flex-direction: column; /* Stack text and image vertically */
57+
padding: 20px; /* Adjust padding for smaller screens */
3158
}
32-
33-
/* Photo section styling */
59+
60+
/* Image styling for small screens */
3461
.home-component-photo {
35-
width: 300px; /* Control the width of the photo */
36-
height: auto;
37-
flex-shrink: 0;
38-
}
39-
40-
.home-component-photo img {
41-
width: 100%;
42-
height: auto;
43-
border-radius: 6px;
44-
border: 2px solid var(--raisin-black); /* Optional border for photo */
45-
object-fit: cover;
62+
width: 100%; /* Make the image width 100% on small screens */
63+
margin-top: 20px; /* Ensure there's space between text and image */
4664
}
47-
48-
.home-component-text ul {
49-
list-style-type: disc; /* Default bullet points */
50-
padding-left: 20px; /* Indent the list */
51-
color: var(--jungle-green); /* Sets the color of the text to jungle green */
52-
}
5365

54-
.home-component-text li {
55-
margin-bottom: 5px; /* Space between items */
56-
color: var(--raisin-black); /* Sets the color of the list items to white */
66+
/* Text section adjustments for small screens */
67+
.home-component-text {
68+
padding-right: 0; /* Remove extra right padding */
69+
text-align: center; /* Center-align text for smaller screens */
70+
}
5771
}

‎src/components/Navbar.css‎

Lines changed: 50 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,5 @@
11
@import '../styles/colors.css';
22

3-
* {
4-
font-family: 'Montserrat', sans-serif;
5-
font-weight: 500;
6-
}
7-
83
.Navbar {
94
background-color: var(--antiflash-white);
105
margin: 0 auto;
@@ -14,62 +9,85 @@
149
}
1510

1611
.Nav-logo {
17-
width: 15px;
18-
/* Set the width of the logo image */
19-
height: auto;
20-
/* Maintain aspect ratio */
12+
width: 20px; /* Default logo size */
13+
height: auto; /* Maintain aspect ratio */
2114
}
2215

16+
/* Navbar Links */
2317
.Nav-link {
2418
color: var(--raisin-black);
2519
text-decoration: none;
2620
padding: 0.5rem 1rem;
2721
}
2822

2923
.Nav-link:hover {
30-
color: var(--jungle-green);
31-
/* Light color on hover */
24+
color: var(--jungle-green); /* Light color on hover */
3225
}
3326

3427
.Nav {
3528
display: flex;
36-
align-items: center;
37-
/* Vertically center the items */
38-
flex-grow: 1;
39-
/* Ensures the nav takes up remaining space */
29+
align-items: center; /* Vertically center the items */
30+
flex-grow: 1; /* Ensures the nav takes up remaining space */
4031
}
4132

33+
/* Space between logo and first nav link */
4234
.Nav-link-logo {
4335
margin-right: 1rem;
44-
/* Adds padding between logo and first nav link */
4536
}
4637

47-
/* Icons Section */
4838
.Nav-icons {
49-
display: flex;
50-
/* Aligns icons horizontally */
51-
align-items: center;
52-
/* Vertically centers the icons */
53-
margin-left: auto;
54-
/* Pushes the icons to the far right */
39+
display: flex; /* Aligns icons horizontally */
40+
align-items: center; /* Vertically centers the icons */
41+
margin-left: auto; /* Pushes the icons to the far right */
5542
}
5643

5744
.Nav-icon {
58-
color: var(--raisin-black);
59-
/* White color for icons */
60-
margin-left: 1rem;
61-
/* Adds space between icons */
62-
text-decoration: none;
63-
/* Removes underline on links */
45+
color: var(--raisin-black); /* White color for icons */
46+
margin-left: 1rem; /* Adds space between icons */
47+
text-decoration: none; /* Removes underline on links */
6448
}
6549

6650
.Nav-icon:hover {
67-
color: var(--jungle-green);
68-
/* Light color on hover for icons */
51+
color: var(--jungle-green); /* Light color on hover for icons */
6952
}
7053

7154
.Nav-link.active {
7255
text-decoration: underline;
7356
text-underline-offset: 9px; /* Adjust underline distance from text */
7457
text-decoration-thickness: 1px; /* Controls the thickness */
75-
}
58+
}
59+
60+
/* Responsive Styles for Small Screens (max-width: 768px) */
61+
@media (max-width: 768px) {
62+
.Navbar {
63+
padding: 10px;
64+
}
65+
66+
/* Smaller logo for mobile view */
67+
.Nav-logo {
68+
width: 1px; /* Adjust logo size for small screens */
69+
}
70+
71+
/* Adjust padding for nav links */
72+
.Nav-link {
73+
padding: 0.5rem 0.8rem; /* Reduced padding for links on small screens */
74+
}
75+
76+
/* Stack the navbar items vertically on smaller screens */
77+
.Nav {
78+
flex-direction: column;
79+
align-items: flex-start; /* Align items at the start */
80+
}
81+
82+
.Nav-icons {
83+
margin-left: 0;
84+
margin-top: 1rem; /* Space between icons when stacking */
85+
}
86+
87+
/* Adjust links alignment for mobile */
88+
.Nav-link {
89+
width: 100%; /* Make nav links fill the width of the navbar */
90+
text-align: center; /* Center text on mobile */
91+
padding: 0.8rem 0; /* Adjust padding */
92+
}
93+
}

‎src/index.css‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,15 @@
11
@import "./styles/colors.css";
22

3+
* {
4+
font-family: 'Montserrat', sans-serif;
5+
font-weight: 500;
6+
}
7+
38
body {
49
margin: 0;
5-
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
10+
/* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen",
611
"Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue",
7-
sans-serif;
12+
sans-serif; */
813
-webkit-font-smoothing: antialiased;
914
-moz-osx-font-smoothing: grayscale;
1015
background-color: black; /* Black background for all pages */

0 commit comments

Comments
 (0)