diff --git a/style.css b/style.css index 3e8d554..1431068 100644 --- a/style.css +++ b/style.css @@ -235,20 +235,37 @@ a:hover { } /* Style for images in a row */ - .bottom-images { + /* Center container for single top image */ +.image-single { display: flex; - justify-content: space-between; - gap: 20px; - margin-top: 20px; + justify-content: center; + margin-bottom: 20px; } - /* Specific size adjustments for Force Trend and Failure Mode images */ + /* Common styling for all images */ + .image-case { + display: flex; + flex-direction: column; + align-items: center; /* Center-aligns images */ + text-align: center; + margin: 0 auto; /* Centers the container within its parent */ + } + + .image-case img { + max-width: 100%; + height: auto; + border-radius: 5px; + box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2); + margin-bottom: 10px; /* Space between image and caption */ + } + + /* Specific scaling for Force Trend and Failure Mode images */ .large-image { - width: 80%; /* Adjust this percentage as needed for a larger size */ + width: 80%; /* Scales larger image to 80% of container */ } .small-image { - width: 20%; /* Adjust this percentage as needed for a smaller size */ + width: 20%; /* Scales smaller image to 70% of container */ } /* Styling for captions */ @@ -258,16 +275,24 @@ a:hover { margin-top: 5px; } - /* Responsive adjustments */ + /* Force row styling for two and three images */ + .bottom-images { + display: flex; + justify-content: center; + gap: 20px; + margin-top: 20px; + } + + /* Adjust for mobile responsiveness */ @media (max-width: 768px) { .bottom-images { flex-direction: column; align-items: center; } .large-image, - .small-image { - width: 80%; /* Adjust as needed for mobile scaling */ + .small-image, + .image-case img { + width: 80%; /* Adjusts size for smaller screens */ } } - \ No newline at end of file