diff --git a/FAQ/sections/faq.liquid b/FAQ/sections/faq.liquid index 1d1ae3e..7ae9e56 100644 --- a/FAQ/sections/faq.liquid +++ b/FAQ/sections/faq.liquid @@ -1,3 +1,9 @@ +{%- comment -%} +Section published at https://sections.design/blogs/shopify/faq-rich-snippets-section +Get the latest version: https://github.com/mirceapiturca/Sections/tree/master/FAQ +{%- endcomment -%} + + {%- comment -%} ---------------- THE CSS ---------------- {%- endcomment -%} {%- assign id = '#shopify-section-' | append: section.id -%} @@ -30,12 +36,24 @@ .overflow-hidden { overflow: hidden } .cursor-pointer { cursor: pointer } - .faq-title { + {{ id }} .faq-container { + max-width: {{ section.settings.max_width }}; + margin: {{ section.settings.margin_top }}rem auto {{ section.settings.margin_bottom }}rem + } + + {{ id }} .faq-title { border-bottom: 1px solid var(--border-color); font-size: var(--title-font-size); color: var(--question-color); } + {{ id }} .faq-panel { + will-change: height; + border-bottom: 1px solid var(--border-color); + background-color: var(--panel-bg); + color: var(--answer-color); + } + .faq-button { font: inherit; background: transparent; @@ -58,13 +76,6 @@ transform: rotate(90deg); } - .faq-panel { - will-change: height; - border-bottom: 1px solid var(--border-color); - background-color: var(--panel-bg); - color: var(--answer-color); - } - .faq-panel * { color: inherit; } @@ -78,6 +89,7 @@ {%- comment -%} ---------------- THE MARKUP ---------------- {%- endcomment -%} +