2026, 새로운 도약을 시작합니다.

CSS 질문드립니다. 채택완료

이윰빌더 다운받아서 공부중입니다.

상품이미지 간격이(실선) 너무 길어서 좀 줄이고 싶습니다.

PHP소스는 좀 아는데 CSS는 아예몰라서요.

어디부분을 수정하면 저 공간을 줄일수가있나요?

조언좀 구합니다.

2943471000_1708159551.6879.jpg

이윰빌더 파일입니다.

Copy




.product-list-10 {margin-left:-10px;margin-right:-10px;font-size:.9375rem}

.product-list-10:after {content:"";display:block;clear:both}

.product-list-10 .item-list-wrap {padding:10px;width:25%;float:left}

.product-list-10 .item-list {position:relative;border:1px solid #e5e5e5;-webkit-transition:all 0.2s ease-in-out;transition:all 0.2s ease-in-out}

.product-list-10 .product-img {position:relative;overflow:hidden;margin:10px;background:#fff}

.product-list-10 .product-img-in {position:relative;overflow:hidden;width:100%}

.product-list-10 .product-img-in:before {content:"";display:block;padding-top:100%;background:#fff}

.product-list-10 .product-img-in .first-img {display:block}

.product-list-10 .product-img-in .second-img {display:none}

.product-list-10 .item-list:hover {border-color:#757575}

.product-list-10 .item-list:hover .product-img-in .second-img {display:block}

.product-list-10 .product-img-in img {display:block;max-width:100%;height:auto;position:absolute;top:0;left:0;right:0;bottom:0}

.product-list-10 .product-img-in .discount-percent {position:absolute;top:-40px;left:-40px;width:80px;height:80px;padding-top:57px;text-align:center;background:#cc2300;color:#fff;font-style:italic;font-size:.75rem;-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);transform:rotate(-45deg)}

.product-list-10 .product-description .product-description-in {position:relative;overflow:hidden;padding:0 10px 10px}

.product-list-10 .product-description .product-name {position:relative;overflow:hidden;margin:10px 0 5px;font-size:1.125rem;font-weight:700;line-height:1.4;height:48px}

.product-list-10 .product-description .product-name a {color:#000}

.product-list-10 .product-description .product-name a:hover {text-decoration:underline}

.product-list-10 .product-description .title-price {font-size:1.125rem;font-weight:700;color:#cc2300}

.product-list-10 .product-description .line-through {font-size:.9375rem;color:#959595;text-decoration:line-through;margin-left:7px;font-weight:400}

.product-list-10 .product-description .product-id {color:#757575;display:block;font-size:.8125rem;margin-top:10px}

.product-list-10 .product-description .product-info {position:relative;overflow:hidden;height:38px;color:#959595;font-size:.8125rem;margin-top:10px}

.product-list-10 .product-description .product-sns {position:relative;height:30px;margin-top:10px}

.product-list-10 .product-description .product-sns ul {position:absolute;top:0;right:0;margin:0;padding:0;list-style:none}

.product-list-10 .product-description .product-sns ul:after {content:"";display:block;clear:both}

.product-list-10 .product-description .product-sns ul li {float:left;margin-left:1px}

.product-list-10 .product-description .product-sns ul li a {display:block;width:30px;height:30px;line-height:30px;text-align:center;background:#b5b5b5;color:#fff;font-size:.75rem}

.product-list-10 .product-description .product-sns ul li:hover .wish-icon {background:#cc2300}

.product-list-10 .product-description .product-sns ul li:hover .facebook-icon {background:#39558f}

.product-list-10 .product-description .product-sns ul li:hover .twitter-icon {background:#4698e0}

.product-list-10 .product-description-bottom {position:relative;overflow:hidden;padding:12px 10px;border-top:1px solid #e5e5e5}

.product-list-10 .product-description-bottom a:hover {text-decoration:underline;color:#000}

.product-list-10 .product-ratings {width:75px;margin:0;padding:0}

.product-list-10 .product-ratings li {padding:0;float:left;margin-right:0}

.product-list-10 .product-ratings li .rating {color:#a5a5a5;font-size:.8125rem;line-height:normal}

.product-list-10 .product-ratings li .rating-selected {color:#cc2300;font-size:.8125rem}

.product-list-10 .shop-rgba-red {background:#cc2300}

.product-list-10 .shop-rgba-yellow {background:#ff9500}

.product-list-10 .shop-rgba-green {background:#00897b}

.product-list-10 .shop-rgba-purple {background:#8e24aa}

.product-list-10 .shop-rgba-orange {background:#f4511e}

.product-list-10 .shop-rgba-dark {background:#3c3c3e}

.product-list-10 .shop-rgba-default {background:#A6A6A6}

.product-list-10 .rgba-banner-area {position:absolute;top:0;right:0}

.product-list-10 .rgba-banner {height:18px;width:70px;line-height:18px;color:#fff;font-size:.6875rem;text-align:center;font-weight:400;position:relative;text-transform:uppercase;margin-bottom:1px}

.product-list-10 .item-list:hover .product-name a {text-decoration:underline}

.product-type-list .product-list-10 .item-list-wrap {width:50%}

.product-type-list .product-list-10 .product-img {position:absolute;top:0;left:0;overflow:hidden;background:#fff;width:160px}

.product-type-list .product-list-10 .product-description {margin-left:175px;min-height:180px}

@media (max-width:1199px) {

    .product-list-10 {margin-left:-5px;margin-right:-5px}

    .product-list-10 .item-list-wrap {width:33.33333%;padding:5px}

}

@media (max-width:991px) {

    .product-list-10 .item-list-wrap {width:50%}

    .product-type-list .product-list-10 .item-list-wrap {width:100%;padding:10px 5px}

}

@media (max-width:767px) {

    .product-list-10 {margin-left:-2px;margin-right:-2px}

    .product-list-10 .item-list-wrap {padding:5px 2px}

    .product-type-list .product-list-10 .item-list-wrap {width:100%;padding:10px 2px}

}

@media (max-width:576px) {

    .product-list-10 .product-img {margin:5px}

    .product-list-10 .product-description .product-description-in {padding:0 5px 5px}

    .product-list-10 .product-description-bottom {padding:12px 5px}

    .product-type-list .product-list-10 .product-img {margin:10px}

    .product-type-list .product-list-10 .product-description .product-description-in {padding:0 10px 10px}

    .product-type-list .product-list-10 .product-description-bottom {padding:12px 10px}

}

@media (max-width:500px) {

    .product-type-list .product-list-10 .product-img {position:relative;top:inherit;left:inherit;overflow:hidden;background:#fff;width:inherit}

    .product-type-list .product-list-10 .product-description {margin-left:0;min-height:inherit}

}





    

    

        

            

            

                        

                        

                        

                            

                        

                        

                        

                        

                        

                        

                        %

                        

                    

                

            

            

            

            

                

                    

                        

                        

답변 2개

채택된 답변
+20 포인트

설명 부분같은데

.product-info 부분 높이를 줄이시거나 하시면될거같아요. 

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

감사합니다.0으로 줄이니까 줄어듭니다.
복받으실꺼에요~

댓글을 작성하려면 로그인이 필요합니다.

다음 부분의 min-height 조절이 도움이 될지 모르겠습니다.

Copy


.product-type-list .product-list-10 .product-description {margin-left:175px;min-height:180px}

로그인 후 평가할 수 있습니다

답변에 대한 댓글 1개

답변감사합니다.두분 말씀듣고 따라하니 핑크빈님말처럼 조정이 되었습니다.

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인
🐛 버그신고