Why is my CSS not targeting the paragraph in my featured columns section?

alek1986
Shopify Partner
27 1 13

Hi,

 

I have added the following heading and paragraph to this section.

 

 

<div class="featured-columns-section">
<h3 class= "section-heading">{{ section.settings.heading }} </h3>
<p class= "section-description-one">{{ section.settings.description }}</p>

{% for block in section.blocks %}

<img class= "image-columns-description-one" src="{{ block.settings.image | img_url: '500x' }}">
<button class="btn-section-columns">Shop now</button>
</div>

 

 

 

Mow when I target those elements with CSS, all rules seem to apply perfectly except the paragraph. When I check on the inspector, is like the paragraph was outside of that class for that particular element. The website in question is https://v9cynb6aq5xcae1n-60679061724.shopifypreview.com.  password: geimpe

 

 

 

.btn-section-columns {
	font:size: 30px;
	display: block;
    margin: 20px auto 20px auto;
    width: 20%;
	padding: 15px 32px;

}
.section-heading {
    color: teal;
    font-size: 52px;
    text-align: center;
	padding-top: 40px;
} 
             
.image-columns-description-one {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

#section-description-one {
	font-size: 32px;
    text-align: center;
	color: white;
}

.featured-columns-section {
	background-color: #caaea0; 
}

 

 

Any thoughts?

 

Thanks in advance

Reply 1 (1)

Not applicable

Hello,

 

I think you missed to close the for loop

{%endfor %}

 

Thank you.