아이템 위치 변경, @media (max-width:1100px)에서 aside_full_down_menu -item의 위치 변경

아이템 위치 변경, @media (max-width:1100px)에서 aside_full_down_menu -item의 위치 변경

QA

아이템 위치 변경, @media (max-width:1100px)에서 aside_full_down_menu -item의 위치 변경

답변 1

본문

- 그누보드6, 기본 테마,  aside(https://policy.glitter.kr/qa_php/min-1101.png)의

- down_menu -item(https://policy.glitter.kr/qa_php/max-1100.png)의 위치를

- 오른쪽 끝으로 옮기고 싶습니다.

-

- default.css의 @media (max-width:1100px)-(https://policy.glitter.kr/qa_php/css-org.png)에서


@media (max-width:1100px) {
    #tnb,
    #hd_wrapper,
    #wrapper { width: 100%; }

- 설정을 변경하였습니다.

-

- 역방향(https://policy.glitter.kr/qa_php/row-reverse-css.png) 설정 후,


@media (max-width:1100px) {
    #tnb,
    #hd_wrapper,
    #wrapper { flex-direction: row-reverse; width: 100%; }

- 위치는 바뀌였으나 (https://policy.glitter.kr/qa_php/row-reverse;-page.png) 중앙에 집중됐습니다.

-

- 추가 설정(https://policy.glitter.kr/qa_php/space-between.png)을 하여 보았으나 - - -


@media (max-width:1100px) {
    #tnb,
    #hd_wrapper,
    #wrapper { display: flex; justify-content: space-between; align-items: center; flex-direction: row-reverse; width: 100%; }

-

- 결과를 얻지 못하여 도움을 요청합니다.

이 질문에 댓글 쓰기 :

답변 1

일반스타일에서 display: flex; 로 되어있는 상태라고한다면.

다음과 같이 해보세요~화이팅~
    #wrapper {flex-direction: row-reverse;width: 100%; justify-content: space-between; align-items: flex-start; }

 

-
- 안녕하세요.
-
- 휴일은 잘 보내셨는지요!
-
- 네~  해 보겠습니다.
-
- 감사합니다.
-  - - - - - - - - - - - - - - -
-  말씀에 따라 이렇게(https://policy.glitter.kr/qa_php/style-new-.png) 설정 ;
-
- ㅠ ㅠ - 이 전의 결과와 같습니다( https://policy.glitter.kr/qa_php/item_move1.png )
-
- 위치는 바뀌였는데, 여백(space-between) 스타일 조정이 안 되고 있습니다.
-
- @media (min-width:1101px) 에서는  display:grid; 으로 되어 있습니다.


@media (min-width:1101px) {
 #wrapper { display:grid; gap: 20px; grid-template-columns: 1000px 180px; width: 1200px; } }

-  이렇게 되어 있습니다.
-

gap:20px 가 이미 여백설정값을 정해져 있는 상태입니다. 따라서
다음과 같이 위치선정을 추가 해주시면될것 같습니다.
    #tnb {grid-column: 2;}
    #hd_wrapper { grid-column: 1;}


만약 display: flex; 설정을 해준상태라면 다음과 같은 형식으로 여백을 조정을 해줄수도 있을것 같습니다.
왼쪽
    #tnb { margin-right: 0; margin-left: 20px; }
오른쪽
    #hd_wrapper { margin-left: 0;margin-right: 20px; }
만약 여백없이 한다면 auto 설정하면될것 같네요 테스트 해보시고 설정 조절해보세요

-
- 시도 하여 보겠습니다.
- - - - - -
-  이렇게(https://policy.glitter.kr/qa_php/style-new-2.png) 변경하였으나.
-
- 아무런 변화가 없습니다(https://policy.glitter.kr/qa_php/row-reverse;-page.png).
.

답변을 작성하시기 전에 로그인 해주세요.
QA 내용 검색
질문등록
전체 63
© SIRSOFT
현재 페이지 제일 처음으로