any response on this?

Perfect! Thank you for your assistance!

Mike,
Thank you so much. This worked great. The only issue now is that the arrows overlap the text in some views. You can see that in the screenshot you posted https://postimg.org/image/6yxf12i25/

How do I prevent the arrows from overlapping the text?

here you go

Hi Ismael,
Thanks for getting back to me. I tried adding the css and it does not work. I did add some css to adjust the heading size as well. here is everything I have in the custom css right now. I am testing screen sizes in http://quirktools.com/screenfly/ and still see the same issues on some screen sizes.

@media only screen and (max-width: 1024px) {
.responsive #top .container .av-content-small, .responsive #top #wrap_all .flex_column, .responsive #top #wrap_all .av-flex-cells .no_margin {
margin: 0;
margin-bottom: 20px;
width: 100%;
}

.responsive #top .flex_column_table_cell {
display: block;
}
}`

@media only screen and (max-width: 1200px) {
h2.avia-caption-title {
font-size: 48px !important;
}}
@media only screen and (max-width: 1325px) {
.avia-caption-content {
font-size: 35px !important;
}}
@media only screen and (max-width: 1100px) {
.avia-caption-content {
font-size: 25px !important;
}}
@media only screen and (max-width: 900px) {
h2.avia-caption-title {
font-size: 42px !important;
}}
@media only screen and (max-width: 875px) {
.avia-caption-content {
font-size: 20px !important;
}}
@media only screen and (max-width: 875px) {
h2.avia-caption-title {
font-size: 38px !important;
}}
@media only screen and (max-width: 767px) {
.avia-caption-content {
font-size: 18px !important;
}}
@media only screen and (max-width: 769px) {
h2.avia-caption-title {
font-size: 25px !important;
}}
@media only screen and (max-width: 479px) {
.avia-caption-content {
font-size: 14px !important;
}}
@media only screen and (max-width: 479px) {
h2.avia-caption-title {
font-size: 20px !important;
}}

I solved this already