XE로 사이트 제작중입니다.

반응형 레이아웃을 쓰고 있는데요.

 

위젯페이지의 PC화면에서 상자위젯 안에서 이미지와 텍스트를 나란히 놓았을때

모바일에서 깨짐이나 작아짐, 치우침 없이 세로로 나란히 나와야 하는데

어떻게 하는지 잘 모르겠네요.

이렇게 저렇게 해봐도 화면이 깨지고 정상적으로 나오지가 않네요ㅠ

 

화면으로 설명을 드리면

아래 이미지 보면 되는데요.

 

PC화면에서는 하나의 상자위젯 안에다 내용직접입력 위젯 두개를 나란히 놓고 

하나는 이미지 하나는 텍스트를 넣고 WIDTH는 50%씩 주었습니다.

그러나 이렇게 하면 모바일화면에서 WIDTH가 50%로 인식이 되어

이미지는 모바일화면에 50%로 줄어들고 텍스트 부분도 역시 모바일 화면에 꽉 차게 나오지 않고

쭈욱~ 길게 나오거든요.

 

이거 위젯 배치를 어떻게 해야 할까요?

XE 전문가님들 조언 좀 부탁드립니다.

 

 

PC모바일최적화문의1.jpg

pc화면

 

 

 

PC모바일최적화문의2.jpg

모바일에서 나와야 하는 화면

 

pc에서는 가로로 나란히 나오고 모바일에서는 깨짐없이 세로로  나오게 하고 싶습니다.

 

조언 부탁드립니다 감사합니다^^

 

 

환절기 감기 조심하세요~~~^^

 

  • profile
    m.layout 폴더에 현재 사용하고 있는 레이아웃을 추가로 넣고 모바일페이지는 따로 설정하시는게
    제일 맘편합니다(그냥 제생각이구요 현재 저도 그렇게 사용중입니다)
  • profile ?
    답변 감사합니다^^
    참고해서 해보겠습니다
  • profile ?
    현재 pc레이아웃을 모바일 레이아웃으로 설정해서 pc는 pc대로 모바일은 모바일대로 css 작업 하란 말씀이신거죠??
  • ? profile
    css 작업이라기 보단 모바일 레이아웃과 pc레이아웃 반응형 쓰려면 머리가 아프더라구요 그래서 하나는 포기하려고 생각하고 모바일레이아웃은 다르게 설정했어요 정신건강에 좋더군요 ㅋㅋㅋㅋㅋ
  • profile ?
    네 꿀팁 감사합니다^^
  • ?
    상자위젯을 50%로 두개 만들어서 각각 넣어보세요
  • ? ?
    답변 감사드립니다.

    상제 위젯을 50%로 두개를 넣으면 모바일에서도 1줄에 50%씩 나뉘어 나오는거 같습니다ㅠㅠ
  • ?
    상자위젯을 100% 로 주셔보셔도 될것 같은데요.
  • ? ?
    상자위젯은 100%로 줬습니다.

    그 안에 내용 위젯을 50%씩 해서 두개를 넣었구요

    그런데 모바일에서 각 내용 위젯이 세로로 안나오고 1줄에 50%씩 나눠져 나오네요ㅠ