나는 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 코드에서 % 값을 변경
어떻게 해결할 수 있는지 알고 계십니까?