ビデオライブラリページCSS修正
Showing
1 changed file
with
29 additions
and
33 deletions
... | @@ -3582,82 +3582,78 @@ body.itemid-132 table { | ... | @@ -3582,82 +3582,78 @@ body.itemid-132 table { |
3582 | /* ------------------------------------------------------------------------- | 3582 | /* ------------------------------------------------------------------------- |
3583 | ビデオライブラリページ | 3583 | ビデオライブラリページ |
3584 | ------------------------------------------------------------------------- */ | 3584 | ------------------------------------------------------------------------- */ |
3585 | .videos-custom h5 { | 3585 | .blog.videos-custom .videos-custom-item-wrapper { |
3586 | padding-left: 0; | ||
3587 | font-size: 1.125rem; | ||
3588 | background: none; | ||
3589 | } | ||
3590 | |||
3591 | .videos-custom-item-wrapper { | ||
3592 | display: flex; | 3586 | display: flex; |
3593 | flex-wrap: wrap; | 3587 | flex-wrap: wrap; |
3594 | justify-content: space-around; | 3588 | justify-content: space-between; |
3589 | margin: 0 0 16px; | ||
3590 | |||
3595 | } | 3591 | } |
3596 | 3592 | ||
3597 | .videos-custom-item-wrapper:before { | 3593 | .blog.videos-custom .videos-custom-item-wrapper:before { |
3598 | content: ""; | 3594 | content: ""; |
3599 | display: block; | 3595 | display: block; |
3600 | min-width: 190px; | 3596 | min-width: 190px; |
3601 | width: 30%; | 3597 | width: calc(33% - 8px); |
3602 | height: 0px; | 3598 | height: 0px; |
3603 | order: 1; | 3599 | order: 1; |
3604 | } | 3600 | } |
3605 | .videos-custom-item-wrapper:after { | 3601 | |
3602 | .blog.videos-custom .videos-custom-item-wrapper:after { | ||
3606 | content: ""; | 3603 | content: ""; |
3607 | display: block; | 3604 | display: block; |
3608 | min-width: 190px; | 3605 | min-width: 190px; |
3609 | width: 30%; | 3606 | width: calc(33% - 8px); |
3610 | height: 0px; | 3607 | height: 0px; |
3611 | } | 3608 | } |
3612 | 3609 | ||
3613 | .videos-custom-item { | 3610 | .blog.videos-custom .videos-custom-item-wrapper > li { |
3611 | list-style: none; | ||
3614 | min-width: 190px; | 3612 | min-width: 190px; |
3615 | width: 30%; | 3613 | width: calc(33% - 8px); |
3616 | margin-bottom: 16px; | 3614 | margin-bottom: 16px; |
3615 | font-size: 1rem; | ||
3616 | text-align: justify; | ||
3617 | } | 3617 | } |
3618 | 3618 | ||
3619 | .videos-custom-item-title { | 3619 | .blog.videos-custom .videos-custom-item-wrapper > li > h5 { |
3620 | padding-left: 0; | ||
3620 | font-size: 1.125rem; | 3621 | font-size: 1.125rem; |
3621 | } | 3622 | background: none; |
3622 | 3623 | margin-top: 15px; | |
3623 | .videos-custom-item-explanation { | 3624 | margin-bottom: 5px; |
3624 | font-size: 1rem; | ||
3625 | } | 3625 | } |
3626 | 3626 | ||
3627 | /* ビデオライブラリページ レスポンシブ*/ | 3627 | /* ビデオライブラリページ レスポンシブ*/ |
3628 | @media (max-width: 900px) { | 3628 | @media (max-width: 900px) { |
3629 | .videos-custom-item { | 3629 | .blog.videos-custom-item-wrapper:before { |
3630 | width: 45%; | 3630 | width: calc(50% - 8px); |
3631 | } | 3631 | } |
3632 | .videos-custom-item-wrapper:before { | 3632 | .blog.videos-custom-item-wrapper:after { |
3633 | width: 45%; | 3633 | width: calc(50% - 8px); |
3634 | } | 3634 | } |
3635 | .videos-custom-item-wrapper:after { | 3635 | .blog.videos-custom .videos-custom-item-wrapper > li { |
3636 | width: 45%; | 3636 | width: calc(50% - 8px); |
3637 | } | 3637 | } |
3638 | } | 3638 | } |
3639 | 3639 | ||
3640 | @media (max-width: 550px) { | 3640 | @media (max-width: 550px) { |
3641 | .videos-custom-item-wrapper { | 3641 | .blog.videos-custom-item-wrapper { |
3642 | display: block; | 3642 | display: block; |
3643 | } | 3643 | } |
3644 | 3644 | ||
3645 | .videos-custom-item { | 3645 | .blog.videos-custom .videos-custom-item-wrapper > li { |
3646 | height: auto; | 3646 | height: auto; |
3647 | width: 100%; | 3647 | width: 100%; |
3648 | padding-bottom: 8px; | 3648 | padding-bottom: 8px; |
3649 | border-bottom: #003894 4px solid; | 3649 | border-bottom: #003894 4px solid; |
3650 | margin-bottom: 24px; | 3650 | margin-bottom: 24px; |
3651 | font-size: 0.875rem; | ||
3651 | } | 3652 | } |
3652 | 3653 | ||
3653 | 3654 | .blog.videos-custom .videos-custom-item-wrapper > li > h5 { | |
3654 | .videos-custom-item-title { | ||
3655 | font-size: 1rem; | 3655 | font-size: 1rem; |
3656 | } | 3656 | } |
3657 | |||
3658 | .videos-custom-item-explanation { | ||
3659 | font-size: 0.875rem; | ||
3660 | } | ||
3661 | } | 3657 | } |
3662 | 3658 | ||
3663 | /* ------------------------------------------------------------------------- | 3659 | /* ------------------------------------------------------------------------- | ... | ... |
-
Please register or sign in to post a comment