2016-11-22 1 views
0

나는 shopify 테마 "Supply"를 사용하고 있으며 3 대신에 4 개의 메뉴 (divs)를 갖도록 내 꼬리말 코드를 편집했습니다. 그러나 이제는 내 페이지를 압축하여 모바일/iPad에서 어떻게 보이는지 보았습니다. 서로 아래에 떨어지면, 그들은 모두 인라인으로 함께 뭉개 버린다.Shopify - 모바일에서 서로 아래에 떨어지지 않는 바닥 글 메뉴 (divs)?

어떻게하면이 문제를 해결할 수 있을지 알고 계시나요? 바닥 글 메뉴가 서로 어울리지 만 4 가지 메뉴가 있습니다.

내 글이 이제 CSS 스크린 샷 편집 한 후 : 내가 shopify 무료로 공급 테마 사용하고 https://postimg.org/image/ssnzk93i7/

을 : 나는 바닥 글 메뉴 3을 만들기 위해 1 차 바닥 글 블록의 코드를 중복 http://supply-electronics.myshopify.com/

을 (자랑스럽게 지원) 그것에게 그것의 자신의 클래스 준 - 내가 갈 새로운 블록을 원하는 곳에 배치 할 "큰 세 사용자 정의"와 '미리보기'를 사용 :

{% include 'custom-snippet.liquid' %}

I 다음 edite D theme.liquid 단지 최종 head 태그 </head> 앞에 다음 코드를 추가하여 CSS : 다음

{{ 'custom-styles.css' | asset_url | stylesheet_tag }}

와 나는 다음과 같은 CSS를 추가 자산에 빈 맞춤 styles.css.liquid를 만들었습니다.

나는

/*footer block 1*/ 
.large--three-twelfths { 
width: 21%; 
} 

/*footer block 2*/ 
.large--five-twelfths { 
width: 23%; 
} 

/*footer block 3*/ 
.large--three-custom { 
width: 27%; 
} 


/*footer block 4*/ 
.large--one-third { 
width: 29%; 
(그들은 모바일이나 아이 패드에 서로 미세에 해당 불과 3 바닥 글 메뉴와 함께 원래의 테마) 페이지 너비에 맞추기 위해 바닥 글 블록이 CSS 코드에서 % 값을 변경

어떻게 해결할 수 있는지 알고 계십니까?

답변

0

이 유형의 문제에는 많은 경우가 있습니다. 1) HTML 태그가 제대로 닫히지 않았습니다. 2) jquery 충돌, 3) CSS 문제. 모바일/ipad 일 수 있습니다. 일부 스크립트가 작동하지 않습니다. 브라우저의 콘솔 탭을 확인하십시오. 자바 스크립트 오류가있을 수 있습니다.