Why is my CSS not applying to HTML in my FAQ section?

Store Design
,
1

Hey All,

So I created this section to add an FAQ to a page. The HTML part looks as follows:


{% for block in section.blocks %}

{% endfor %}

After the schema I then have the following stylesheet:

{% stylesheet %}
.faq-container {
	margin: 2rem auto;
}

.faq-container summary {
	align-items: center;
	cursor: pointer;
	display: flex;
	justify-content: space-between;
	padding: 0.5rem;
}

.faq-container summary::after {
	content: "+";
	display: block;
}

.faq-container details[open] summary::after {
	content: "-";
}
{% endstylesheet %}

When I add the section to a page everything works great but, the CSS is not applied at all. Not sure if it is because I am viewing the page via “storename.myshopify.com/admin/themes/131481272532/editor?previewPath=…”, I doubt it though as other styles are applied.

All help appreciated. Thanks!

2

hello. as far as I understand, you didn’t specify a link to CSS in HTML
3

Thank you for getting back to me. From https://riptutorial.com/shopify/example/30781/using-javascript-and-stylesheets-in-sections and https://shopify.dev/themes/architecture/sections/section-assets#stylesheet the style included there are gathered up by Shopify and injected into the header of all pages. If I do need to reference the stylesheet as you suggested, in which file would the link tag be added to?

4

Here is the entire liquid file (sections/tpr-faq-mi-liquid):


{% for block in section.blocks %}

{% endfor %}

{% schema %}
{
"name": "TPR FAQ",
"blocks": [
{
"type": "faq",
"name": "FAQ",
"settings": [
{
"id": "isopen",
"type": "checkbox",
"label": "Show contents"
},
{
"id": "question",
"type": "text",
"label": "Question"
},
{
"id": "answer",
"type": "textarea",
"label": "Answer"
}
]
}
]
}
{% endschema %}

{% stylesheet %}
.faq-container {
margin: 2rem auto;
}

.faq-container summary {
align-items: center;
border-bottom: 1px solid #333;
cursor: pointer;
display: flex;
font-size: 1.2rem;
font-weight: bold;
justify-content: space-between;
padding: 0.5rem;
}

.faq-container summary::after {
content: "+";
display: block;
}

.faq-container details[open] summary::after {
content: "-";
}

.faq-container p {
padding-left: 1rem;
}
{% endstylesheet %}

This file is then used inside templates/product.add-to-cart-mi-liquid as follows:


{% section 'tpr-faq-mi' %}