06d3021b by TaishiTokudome

ビデオライブラリページCSS修正

1 parent 178733ea
...@@ -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 /* -------------------------------------------------------------------------
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!