Tagged: promobox
Is there a way to include a dropshadow all the way around a Promo Box that contains other items? Right now I have it styled with:
.av_promobox {box-shadow: 0px 4px 10px 0px rgba(0, 0, 4, 0.4)}
This works great on other Promo Boxes, but for one specific box it only puts a shadow on the title. We’d like it to be around everything in the Promo Box as a container (which includes a Testimonial slide show and All Testimonials button).
An example of what we’re looking for is located here (the dashed lines are to show what’s to be included for the shadow):
https://www.dropbox.com/s/gp4x3stgje6b4xc/SNNHome_promobox.pdf?dl=0
Thanks in advance!
-Jack
Hi SeattleNanny97!
Surround the promobox and testimonial inside a color section and a 1/1 column element and give the color section a custom ID. You can then use some CSS like so.
#yourID .flex_column { box-shadow: 0px 0px 5px black; }
Cheers!
Elliott
Thanks Elliot, though with the color section it doesn’t have a column format and therefore goes full screen – not a useful application for the dropshadow.
Hey!
To get the dropshadow surrounding both elements you would have to nest them all inside a column shortcode. And to target just one column shortcode in your page you would have to nest that inside a color section (or grid element) so you can give it a custom ID.
It might be easier to use the default editor in this case so you could just surround the elements with your own HTML and IDs.
Regards,
Elliott