그누보드 QA - 서로 다른 노트북에서 볼때 여백이 다르게 보이는 현상

서로 다른 노트북에서 볼때 여백이 다르게 보이는 현상

gagot 자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

자기소개 전체게시물 회원게시물 회원 질문검색 회원 답변검색 회원 댓글검색

2023.03.30 13:26:22 조회 1395 (125.♡.♡.133)

본문

https://sir.kr/g5_theme/8851 공개해주신 테마로 제작 중입니다.

필요한 부분을 골라 붙여넣기로 하며 인덱스를 꾸미고 있습니다. 텍스트와 이미지 각 카테고리 별 상하 여백(em) 이라는 간격 조정만 했습니다.

그리고 첨부 이미지에 최신글 처럼 불러오기 위해 게시판을 만들고 글작성 후 최신글 처럼 불러와지는데, 작업을 한 노트북에서는 아래 처럼 오른쪽 여백이 생기며 왼쪽으로 밀착을 하고 있습니다.

상하여백 조정한게 영향있나 해서 원복을 했는데도 오른쪽 공백이 사라지지 않네요.

그런데 특이한건 서브로 열어놓은 노트북에서는 아래와 같이 정상적으로 보입니다.

1번 노트북도 처음에는 정상적으로 보였는데 어느순간 부터 공백이 생기네요. 물리적인 차이점은 오른쪽 공백생기는 노트북 모니터 화면이 조금 더 큰거 외...; 같은 인터넷망으로 보는데도 다른건 왜일까요?

해당하는 css코드는 아래와 같습니다.


 
.sec6{
    padding:15em 0;
}
.sec6-inner{
    width:1400px;
    display: flex;align-items: flex-start;
    justify-content: space-between;
    margin:0 auto;
}
.sec6-lt{
    width:48%;
}
.sec6-lt h3{
    font-size: 40px;
    line-height: 1.2;
    letter-spacing: -0.03em;
    position: relative;
}
.sec6-lt .sec6-wrap{
    width:100%;
    height: 380px;
    margin-top:20px;
}
.sec6-con{
    width:100%;height:380px;
    position: relative;
    display: flex;align-items: center;
    justify-content: center;
}
.sec6-con p{
    font-size: 30px;
    color:#fff;
    transform: translateY(300%);
    opacity: 0;
    font-weight: 600;
    width:100%;text-align: center;
}
.sec6-img{
    width:100%;height: 100%;
    position: absolute;
    top:0;left:0;
    z-index: -1;
}
.slick-current .sec6-img{
    transform: scale(1.3);
    transition: 1.5s ease;
}
.slick-current .sec6-con p{
    transform: translateY(0) scale(1.2);
    opacity: 1;
    transition:1s ease;
}
.sec6-rt{
    width:48%;
}
.sec6-rt ul{
    width:95%;
    display: flex;flex-flow: row wrap;
    align-content: center;
    justify-content: center;
}
.sec6-rt li{
    width:100%;
    padding:30px 0px;
    border-bottom: 1px solid #ddd;
}
.sec6-rt li:nth-of-type(1){
    padding-top: 0;
}
.sec6-rt li a{
    width:100%;height: 100%;
    display: flex;align-items: flex-start;
}
.sec6-rt .category{
    font-size: 16px;
    color:#b7815a;
    white-space: nowrap;
}
.sec6-rt .date{
    text-align: center;
    margin:0px 40px;;
}
.sec6-rt .date h4{
    font-size: 60px;
    line-height: 0.8;
}
.sec6-rt .date span{
    font-size: 16px;
    margin-top:5px;
    display: inline-block;
}
.sec6-rt dt{
    font-weight: 500;
    font-size: 18px;
}
.sec6-rt dd{
    font-size: 16px;
    margin-top:2px;
    word-break: keep-all;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    max-height: 2.6;
}