To make the page more responsive and dynamic without changing the colors, you can adjust the CSS to better handle different screen sizes and ensure proper alignment and spacing. Below are the suggested changes:
/* General styles */
.title {
line-height: 52px;
letter-spacing: -0.011em;
font-size: 42px;
font-weight: 700;
font-style: normal;
font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
text-align: center; /* Center the title for better responsiveness */
}
.header-style p {
margin: 0;
text-align: center; /* Center-align author and date */
}
.content {
margin-top: 20px;
font-family: source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif;
font-size: 20px;
line-height: 32px;
letter-spacing: -0.003em;
font-style: normal;
word-break: break-word;
font-weight: 400;
color: #242424;
text-align: justify; /* Improve readability */
}
.card-body {
padding: 15px 30px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Add a subtle shadow for better design */
border-radius: 8px; /* Rounded corners for a modern look */
background-color: #fff; /* Ensure content is readable on all backgrounds */
}
/* Responsive styles */
@media (max-width: 1080px) {
.card-body {
padding: 15px;
}
.title {
line-height: 36px;
letter-spacing: -0.011em;
font-size: 32px;
font-weight: 700;
font-style: normal;
font-family: sohne, "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: 0;
}
}
@media (max-width: 768px) {
.title {
font-size: 28px;
line-height: 32px;
}
.content {
font-size: 18px;
line-height: 28px;
}
.card-body {
padding: 10px;
}
}
@media (max-width: 576px) {
.title {
font-size: 24px;
line-height: 28px;
}
.content {
font-size: 16px;
line-height: 24px;
}
.card-body {
padding: 8px;
}
}
.share-button {
display: flex;
justify-content: center;
align-items: center;
margin-top: 20px; /* Add spacing above the button */
}
.row {
margin: 0; /* Remove extra margins for better alignment */
}
.col-md-9, .col-md-3 {
padding: 0 15px; /* Add padding for better spacing */
}