Drop shadow to improve visibility on certain text

Site URL: https://jordivandenbroeck.be

Hi, 

On my pricing page (jordivandenbroeck.be/pricing) I used text on images but the text is hard to read. I would like to add drop shadow to it but I don't know how. 

Can anyone help please?

Thank you very much in advance and kind regards,
Jordi

1 hour ago, JordiVandenBroeck said:

Site URL: https://jordivandenbroeck.be

Hi, 

On my pricing page (jordivandenbroeck.be/pricing) I used text on images but the text is hard to read. I would like to add drop shadow to it but I don't know how. 

Can anyone help please?

Thank you very much in advance and kind regards,
Jordi

Try adding to Home > Design > Custom Css

section[data-section-id="61cd90c4c928c169031195e5"] .list-item-content__description *{
    text-shadow: 4px 4px 8px red;
}

Change the value until it meets your requirement

Support me by pressing 👍 if this useful for you

17 minutes ago, bangank36 said:

Try adding to Home > Design > Custom Css

section[data-section-id="61cd90c4c928c169031195e5"] .list-item-content__description *{
    text-shadow: 4px 4px 8px red;
}

Change the value until it meets your requirement

Support me by pressing 👍 if this useful for you

Thank you so incredibly much! That is exactly what I'm looking for except for 2 small things: how can I do the same for the title and the button on those same images? 

Thank you so so much!

10 minutes ago, JordiVandenBroeck said:

Thank you so incredibly much! That is exactly what I'm looking for except for 2 small things: how can I do the same for the title and the button on those same images? 

Thank you so so much!

You can try 

section[data-section-id="61cd90c4c928c169031195e5"] * {
    text-shadow: 4px 4px 8px red;
}

to apply all text in this section

Hope that it makes sense

34 minutes ago, bangank36 said:

You can try 

section[data-section-id="61cd90c4c928c169031195e5"] * {
    text-shadow: 4px 4px 8px red;
}

to apply all text in this section

Hope that it makes sense

Okay we are very close! Now the text inside of the button also has the drop shadow but that's not how it should be. All text should have the drop shadow except for the one inside the button but the button itself should have the drop shadow.

10 minutes ago, JordiVandenBroeck said:

Okay we are very close! Now the text inside of the button also has the drop shadow but that's not how it should be. All text should have the drop shadow except for the one inside the button but the button itself should have the drop shadow.

You can change it by yourself

The first value is the horizon direction of shadow

The second one is the vertical direction of shadow

The third one is the blur-radius

Hope that it makes sense

Just now, bangank36 said:

You can change it by yourself

The first value is the horizon direction of shadown

The second one is the vertical direction of shadown

The third one is the blur-radius

Hope that it makes sense

Thank you for your answer! I understand how I can change it myself but the problem is that the text inside of the button should not have the drop shadow. I can not change that independantly from the other text as it is now.

Just now, JordiVandenBroeck said:

Thank you for your answer! I understand how I can change it myself but the problem is that the text inside of the button should not have the drop shadow. I can not change that independantly from the other text as it is now.

Sorry for misunderstand. I thought that you also need to apply shadow for button

Only apply for heading, paragraph, not button, is it correct?

4 minutes ago, bangank36 said:

Sorry for misunderstand. I thought that you also need to apply shadow for button

Only apply for heading, paragraph, not button, is it correct?

No problem at all! I probably didn't explain it very well. I would like shadow for heading, paragraph and box of button, not text in button. 

Thank you!

46 minutes ago, JordiVandenBroeck said:

No problem at all! I probably didn't explain it very well. I would like shadow for heading, paragraph and box of button, not text in button. 

Thank you!

Try the following code instead of my previous one

section[data-section-id="61cd90c4c928c169031195e5"] {
	--shadow: 4px 4px 8px #000;
	h2 {
		text-shadow: var(--shadow);
	}
	p {
		text-shadow: var(--shadow);
	}
	.list-item-content__button-container {
		a {
			box-shadow: var(--shadow);
		}
	}
}

Let me know how it works on your site

3 minutes ago, bangank36 said:

Try the following code instead of my previous one

section[data-section-id="61cd90c4c928c169031195e5"] {
	--shadow: 4px 4px 8px #000;
	h2 {
		text-shadow: var(--shadow);
	}
	p {
		text-shadow: var(--shadow);
	}
	.list-item-content__button-container {
		a {
			box-shadow: var(--shadow);
		}
	}
}

Let me know how it works on your site

That is fantastic! Exactly what I was looking for! Thank you so incredibly much. 🙂

It's good to know that