diff --git a/amp.css b/amp.css index ff00e667c..d178dea70 100644 --- a/amp.css +++ b/amp.css @@ -6015,6 +6015,10 @@ figcaption { /************************************ ** 縦型カード ************************************/ +.rect-vertical-card .related-entry-card { + display: flex; + flex-direction: column; +} .rect-vertical-card .related-list { display: flex; flex-wrap: wrap; @@ -6032,10 +6036,19 @@ figcaption { } .rect-vertical-card .related-entry-card-content { margin: 0; + display: flex; + flex-direction: column; + height: 100%; + padding-bottom: 0; } .rect-vertical-card .related-entry-card-title { font-size: 16px; } +.rect-vertical-card .related-entry-card-meta { + margin-top: auto; + padding-top: 5px; + position: unset; +} .rect-vertical-card-3 .related-entry-card-wrap { width: 33%; diff --git a/css/admin.css b/css/admin.css index db59f9f44..a15ed3959 100644 --- a/css/admin.css +++ b/css/admin.css @@ -5785,6 +5785,10 @@ body.wp-admin { .admin-settings .demo .rect-mini-card .related-entry-card-snippet { display: none; } +.admin-settings .demo .rect-vertical-card .related-entry-card { + display: flex; + flex-direction: column; +} .admin-settings .demo .rect-vertical-card .related-list { display: flex; flex-wrap: wrap; @@ -5802,10 +5806,19 @@ body.wp-admin { } .admin-settings .demo .rect-vertical-card .related-entry-card-content { margin: 0; + display: flex; + flex-direction: column; + height: 100%; + padding-bottom: 0; } .admin-settings .demo .rect-vertical-card .related-entry-card-title { font-size: 16px; } +.admin-settings .demo .rect-vertical-card .related-entry-card-meta { + margin-top: auto; + padding-top: 5px; + position: unset; +} .admin-settings .demo .rect-vertical-card-3 .related-entry-card-wrap { width: 33%; } @@ -14001,6 +14014,10 @@ body.wp-admin { .admin-settings .demo .rect-mini-card .related-entry-card-snippet { display: none; } +.admin-settings .demo .rect-vertical-card .related-entry-card { + display: flex; + flex-direction: column; +} .admin-settings .demo .rect-vertical-card .related-list { display: flex; flex-wrap: wrap; @@ -14018,10 +14035,19 @@ body.wp-admin { } .admin-settings .demo .rect-vertical-card .related-entry-card-content { margin: 0; + display: flex; + flex-direction: column; + height: 100%; + padding-bottom: 0; } .admin-settings .demo .rect-vertical-card .related-entry-card-title { font-size: 16px; } +.admin-settings .demo .rect-vertical-card .related-entry-card-meta { + margin-top: auto; + padding-top: 5px; + position: unset; +} .admin-settings .demo .rect-vertical-card-3 .related-entry-card-wrap { width: 33%; } diff --git a/scss/_related-entry-card.scss b/scss/_related-entry-card.scss index ed21770ba..eb25f0b92 100644 --- a/scss/_related-entry-card.scss +++ b/scss/_related-entry-card.scss @@ -73,11 +73,17 @@ ** 縦型カード ************************************/ .rect-vertical-card{ + .related-entry-card { + display: flex; + flex-direction: column; + } + .related-list{ display: flex; flex-wrap: wrap; justify-content: space-around; } + .related-entry-card-wrap{ padding: 5px; } @@ -92,12 +98,21 @@ .related-entry-card-content{ margin: 0; - //padding: 0; + display: flex; + flex-direction: column; + height: 100%; + padding-bottom: 0; } .related-entry-card-title{ font-size: 16px; } + + .related-entry-card-meta { + margin-top: auto; + padding-top: 5px; + position: unset; + } } .rect-vertical-card-3{ diff --git a/style.css b/style.css index b43cbd361..722387747 100644 --- a/style.css +++ b/style.css @@ -6040,6 +6040,10 @@ figcaption { /************************************ ** 縦型カード ************************************/ +.rect-vertical-card .related-entry-card { + display: flex; + flex-direction: column; +} .rect-vertical-card .related-list { display: flex; flex-wrap: wrap; @@ -6057,10 +6061,19 @@ figcaption { } .rect-vertical-card .related-entry-card-content { margin: 0; + display: flex; + flex-direction: column; + height: 100%; + padding-bottom: 0; } .rect-vertical-card .related-entry-card-title { font-size: 16px; } +.rect-vertical-card .related-entry-card-meta { + margin-top: auto; + padding-top: 5px; + position: unset; +} .rect-vertical-card-3 .related-entry-card-wrap { width: 33%;