I added some custom arrows to my revolution slider, but they don’t resize properly when the browser window is resized or when viewed on a mobile device. I’ve tried using max width and auto in their css classes but that yielded no results. Any suggestions? Alternatively, I could probably accept a conditional statement (ie, if viewed on mobile, arrows revert back to default).

Thanks in advance.

Please add the following mobile CSS code for arrows:

@media (max-width:  480px) {

.tp-rightarrow.default {
   background: url(http://nlilabel.com/wp-content/plugins/revslider/rs-plugin/assets/large_right.png) no-repeat 0 0;
  margin-right: 0px; 
  background-position: 0% -40px;
  margin-top: -15px !important;
}
.tp-leftarrow.default {
  background: url(http://nlilabel.com/wp-content/plugins/revslider/rs-plugin/assets/large_left.png) no-repeat 0 0;
  background-position: 0% -40px;
  margin-top: -15px !important;
}

.tp-leftarrow:before,
.tp-rightarrow:before{
  content: "";
}
}

Hope this helps.

I’m viewing on an iPhone 5 screen for testing if that helps.

We’d love to help you further with this however, this falls outside the scope of our support as this is under custom development. The code given serves only as a guide. We have no resources for further enhancement, modification or fixing complications arising from the use of the code. You might want to contact our trusted partners who caters X setup and customization needs. Please see https://theme.co/x/member/custom-development/.

Thank you for understanding.