I have added some media queries to my code so that my three card row drops down to two cards when I reduce the screen to iPad size and down to one card when I reduce the screen to mobile size. However, when the cards are reducing in size they become very thin (seemingly with too much padding around) so that the content only has a couple of words on each line. I need the cards to truly span 50% or 100% of the page, but can't figure out why so much padding is preventing this. Please help!
I have tried to add media queries and troubleshooted on ChatGPT with no luck.
<!-- Blog -->
<main class="content">
<div class="wrapper-files-blog">
<div class="header">
<h1 class="header__title">Newsfeed</h1>
<h2 class="header__subtitle">Horizon scanning - Rheumatology</h2>
<div class="container-blog">
<div class="square">
<div class="blog-date">September 24, 2023</div>
<div class="blog">Tool Predicts Risk of Developing PsA Among Patients With Psoriasis</div>
<p>- Clinical information can accurately predict the 1- and 5-year risk of psoriatic arthritis (PsA) in psoriasis patients, leading to the development of the Psoriatic Arthritis Risk Estimation Tool (PRESTO) based on data from 635 patients.
<br>- Key predictors for developing PsA within 1 year include factors such as younger age, male sex, and family history, while the 5-year risk is associated with symptoms like morning stiffness, psoriatic nail lesions, and fatigue; prediction models showed areas under the curve of 72.3 and 74.9 respectively.
</p>
<div><a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/tool-predicts-risk-developing-psa-among-patients-psoriasis" target="_" class="button">Read More</a></div>
</div>
<div class="square">
<div class="blog-date">September 24, 2023</div>
<div class="blog">Tool Predicts Risk of Developing PsA Among Patients With Psoriasis</div>
<p>- Clinical information can accurately predict the 1- and 5-year risk of psoriatic arthritis (PsA) in psoriasis patients, leading to the development of the Psoriatic Arthritis Risk Estimation Tool (PRESTO) based on data from 635 patients.
<br>- Key predictors for developing PsA within 1 year include factors such as younger age, male sex, and family history, while the 5-year risk is associated with symptoms like morning stiffness, psoriatic nail lesions, and fatigue; prediction models showed areas under the curve of 72.3 and 74.9 respectively.
</p>
<div><a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/tool-predicts-risk-developing-psa-among-patients-psoriasis" target="_" class="button">Read More</a></div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">The Culprit in axSpA: Structural Damage or Disease Activity?</div>
<p>- Global functioning of patients with axial spondyloarthritis (axSpA) is more strongly linked with measures of disease activity and function than with mobility and radiographic damage
<br>- Results also suggest that global functioning is, in this cohort, not much dependent on the degree of structural damage in the axial skeleton
<br>- The study shows that axSpA disease specific PRO's have impact on global functioning whereas spinal mobility scores, even if objectively assessed by the Epionics SPINE (an electronic device for assessment of axial mobility that provides an objective measure of spinal mobility by assessing range [RoM] and range of kinematic [RoK]), have limited impact on patient reported global functioning
</p>
<div><a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/culprit-axspa-structural-damage-or-disease-activity" target="_" class="button">Read More</a></div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">Real-World Evidence Continues to Build Hope for People with Psoriatic Arthritis</div>
<p>- RWE studies provide valuable insights that clinical trials cannot, and support existing conclusions drawn from clinical trials
<br>- Empower HCPs and patients to make informed decisions about treatment
<br>- Nearly 80% of patients had persistent guselkumab use at six months, supporting robust retention data of guselkumab-treated patients (≥90%) from clinical trials
<br>- Patients with 6 months of persistent guselkumab use experienced statistically significant improvements in peripheral joint disease, skin disease, and patient-reported pain
</p>
<div><a href="https://www.hcplive.com/view/real-world-evidence-continues-to-build-hope-for-people-with-psoriatic-arthritis" target="_" class="button">Read More</a></div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">Guselkumab Improves Skin Disease Activity, Baseline Arthritis in TNF-IR PsA</div>
<p>- Competitor represents an efficacious alternative to TNF inhibitors in patients with intolerance/inadequate response (Phase 3b COSMOS trial)
<br>- Among participants in the biomarker cohort, 44% in the guselkumab group versus 20% in the placebo group achieved an ACR20 response at Week 24
</p>
<div><a href="https://www.hcplive.com/view/guselkumab-improves-skin-disease-activity-baseline-arthritis-in-tnf-ir-psa" target="_" class="button">Read More</a></div>
</div>
<div class="square">
<div class="blog-date">August 9, 2023</div>
<div class="blog">PRESTO Successfully Predicts Future PsA in Patients With Psoriasis</div>
<p>- A study in Arthritis & Rheumatology detailed the creation of the Psoriatic Arthritis Risk Estimation Tool (PRESTO), a tool designed to predict psoriatic arthritis (PsA) development in psoriasis patients using available clinical data.
<br>- This prediction model, developed using the University of Toronto Psoriasis Cohort, identified various risk factors for PsA development within 1 and 5 years, including family history, pain severity, and nail lesions.
<br>- Despite the study's limitations, such as a small sample size, researchers believe the PRESTO tool can aid in early diagnosis, inform treatment decisions, and enhance patient education regarding PsA risk.
</p>
<div><a href="https://www.hcplive.com/view/tool-successfully-predicts-future-psa-in-patients-with-psoriasis" target="_" class="button">Read More</a></div>
</div>
</div>
</div>
</div>
</div>
</main>
/* Blog */
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
.container-blog {
display: flex;
flex-direction: row;
justify-content: space-between;
flex-wrap: wrap;
width: 100%;
padding: 40px 10px;
}
.square {
flex: 0 0 calc(33.33% - 30px);
margin: 15px;
box-sizing: border-box;
min-height: 215px;
background: white;
padding: 35px;
border-radius: 4px;
box-shadow: 0px 3px 4px rgba(217, 219, 223, 0.6);
-webkit-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all 0.3s ease;
position: relative;
}
.blog {
margin: auto;
text-align: left;
margin-top: 5px;
padding-left: 5px;
font-family: 'Merriweather', serif;
font-size: 18px;
}
.blog-date, .square p {
text-align: justify;
padding-left: 5px;
padding-right: 5px;
margin-top: 5px;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 14px;
}
.button {
background-color: #00b0b9;
color: white;
width: 75px;
padding: 10px 10px;
border-radius: 3px;
text-align: center;
text-decoration: none;
display: block;
margin-top: 5px;
font-size: 12px;
cursor: pointer;
font-family: 'Merriweather';
position: absolute;
bottom: 10px;
right: 10px;
}
/* iPad */
@media only screen and (max-width: 768px) {
.square {
flex: 0 0 calc(50% - 30px); /* Change to 50% width for 2 squares per row */
}
}
/* Mobile */
@media only screen and (max-width: 480px) {
.square {
flex: 0 0 100%; /* One square per row on mobile */
margin: 10px 0;
}
}
Four suggestions for you:
gap on the container rather than margins on the squares/boxes.vw units for the gap and for the padding inside the squares/boxes, so they will automatically grow with the width of the browser window. If the gaps/padding get too big, you can use a max() expression like max(2.5vw, 30px), and if necessary you can set both lower and upper limits using a clamp() expression such as clamp(5px, 2.5vw, 30px).After running this snippet, make sure you use the full page link to test the responsiveness.
/* Blog */
@import url('https://fonts.googleapis.com/css?family=Merriweather|Open+Sans');
body {
padding: 2.5vw;
background: #f6f6f6;
}
.container-blog {
display: grid;
gap: 3vw;
/* we want just a single column on mobile, which is the default */
}
.square {
box-sizing: border-box;
background: white;
padding: 2.5vw;
border-radius: 6px;
box-shadow: 0px 3px 4px rgba(217, 219, 223, 0.6);
transition: all 0.3s ease;
position: relative;
}
.blog {
text-align: left;
font-family: 'Merriweather', serif;
font-size: 18px;
}
.blog-date, .square p {
text-align: justify;
font-family: 'Open Sans', sans-serif;
font-size: 12px;
color: #C8C8C8;
line-height: 14px;
}
.button {
background-color: #00b0b9;
color: white;
width: 75px;
padding: 10px;
border-radius: 13px;
text-align: center;
text-decoration: none;
display: block;
font-size: 12px;
cursor: pointer;
font-family: 'Merriweather';
position: absolute;
bottom: 0;
right: 0;
border: 10px solid white;
}
/* tablet */
@media (min-width: 750px) {
.container-blog {
grid-template-columns: repeat(2, minmax(0, 1fr)); /* two equal columns */
}
}
/* laptop/desktop */
@media (min-width: 1000px) {
.container-blog {
grid-template-columns: repeat(3, minmax(0, 1fr)); /* three equal columns */
}
}<div class="container-blog">
<div class="square">
<div class="blog-date">September 24, 2023</div>
<div class="blog">Tool Predicts Risk of Developing PsA Among Patients With Psoriasis</div>
<p>- Clinical information can accurately predict the 1- and 5-year risk of psoriatic arthritis (PsA) in psoriasis patients, leading to the development of the Psoriatic Arthritis Risk Estimation Tool (PRESTO) based on data from 635 patients.
<br>- Key predictors for developing PsA within 1 year include factors such as younger age, male sex, and family history, while the 5-year risk is associated with symptoms like morning stiffness, psoriatic nail lesions, and fatigue; prediction models showed areas under the curve of 72.3 and 74.9 respectively.
</p>
<div>
<a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/tool-predicts-risk-developing-psa-among-patients-psoriasis" target="_" class="button">Read More</a>
</div>
</div>
<div class="square">
<div class="blog-date">September 24, 2023</div>
<div class="blog">Tool Predicts Risk of Developing PsA Among Patients With Psoriasis</div>
<p>- Clinical information can accurately predict the 1- and 5-year risk of psoriatic arthritis (PsA) in psoriasis patients, leading to the development of the Psoriatic Arthritis Risk Estimation Tool (PRESTO) based on data from 635 patients.
<br>- Key predictors for developing PsA within 1 year include factors such as younger age, male sex, and family history, while the 5-year risk is associated with symptoms like morning stiffness, psoriatic nail lesions, and fatigue; prediction models showed areas under the curve of 72.3 and 74.9 respectively.
</p>
<div>
<a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/tool-predicts-risk-developing-psa-among-patients-psoriasis" target="_" class="button">Read More</a>
</div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">The Culprit in axSpA: Structural Damage or Disease Activity?</div>
<p>- Global functioning of patients with axial spondyloarthritis (axSpA) is more strongly linked with measures of disease activity and function than with mobility and radiographic damage
<br>- Results also suggest that global functioning is, in this cohort, not much dependent on the degree of structural damage in the axial skeleton
<br>- The study shows that axSpA disease specific PRO's have impact on global functioning whereas spinal mobility scores, even if objectively assessed by the Epionics SPINE (an electronic device for assessment of axial mobility that provides an objective measure of spinal mobility by assessing range [RoM] and range of kinematic [RoK]), have limited impact on patient reported global functioning
</p>
<div>
<a href="https://www.hmpgloballearningnetwork.com/site/rheum/news/culprit-axspa-structural-damage-or-disease-activity" target="_" class="button">Read More</a>
</div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">Real-World Evidence Continues to Build Hope for People with Psoriatic Arthritis</div>
<p>- RWE studies provide valuable insights that clinical trials cannot, and support existing conclusions drawn from clinical trials
<br>- Empower HCPs and patients to make informed decisions about treatment
<br>- Nearly 80% of patients had persistent guselkumab use at six months, supporting robust retention data of guselkumab-treated patients (≥90%) from clinical trials
<br>- Patients with 6 months of persistent guselkumab use experienced statistically significant improvements in peripheral joint disease, skin disease, and patient-reported pain
</p>
<div>
<a href="https://www.hcplive.com/view/real-world-evidence-continues-to-build-hope-for-people-with-psoriatic-arthritis" target="_" class="button">Read More</a>
</div>
</div>
<div class="square">
<div class="blog-date">August 25, 2023</div>
<div class="blog">Guselkumab Improves Skin Disease Activity, Baseline Arthritis in TNF-IR PsA</div>
<p>- Competitor represents an efficacious alternative to TNF inhibitors in patients with intolerance/inadequate response (Phase 3b COSMOS trial)
<br>- Among participants in the biomarker cohort, 44% in the guselkumab group versus 20% in the placebo group achieved an ACR20 response at Week 24
</p>
<div>
<a href="https://www.hcplive.com/view/guselkumab-improves-skin-disease-activity-baseline-arthritis-in-tnf-ir-psa" target="_" class="button">Read More</a>
</div>
</div>
<div class="square">
<div class="blog-date">August 9, 2023</div>
<div class="blog">PRESTO Successfully Predicts Future PsA in Patients With Psoriasis</div>
<p>- A study in Arthritis & Rheumatology detailed the creation of the Psoriatic Arthritis Risk Estimation Tool (PRESTO), a tool designed to predict psoriatic arthritis (PsA) development in psoriasis patients using available clinical data.
<br>- This prediction model, developed using the University of Toronto Psoriasis Cohort, identified various risk factors for PsA development within 1 and 5 years, including family history, pain severity, and nail lesions.
<br>- Despite the study's limitations, such as a small sample size, researchers believe the PRESTO tool can aid in early diagnosis, inform treatment decisions, and enhance patient education regarding PsA risk.
</p>
<div>
<a href="https://www.hcplive.com/view/tool-successfully-predicts-future-psa-in-patients-with-psoriasis" target="_" class="button">Read More</a>
</div>
</div>
</div>After running this snippet, make sure you use the full page link to test the responsiveness.