Hey there,

Thanks for reaching in,

Please try this CSS

@media only screen and (max-width: 690px) {
.ascend .nectar-progress-bar .bar-wrap { margin: 20px 0 0 0!important; }
}

Hope this helps,

Regards

Hey Again,

Seems to be working correctly : http://prntscr.com/jj63p8 . 

Best

Hey there,

Thanks for reaching in,

Do you want to use this for desktop as well, isn't it already showing fine on desktop?

Regards

Hey there,

Thanks for reaching in,

Then you might wanna drop the media queries all together and just use the snippet as it is so it affects all screen sizes. 

.ascend .nectar-progress-bar .bar-wrap { margin: 20px 0 0 0!important; }

But if you want control of the margin for different screen sizes then you can set up the media queries and tweak for each screen size.

/* For phones */
@media only screen and (max-width: 690px) {
.ascend .nectar-progress-bar .bar-wrap { margin: 20px 0 0 0!important; }
}
/* For tablets */
@media only screen and (min-width: 768px) {
.ascend .nectar-progress-bar .bar-wrap { margin: 20px 0 0 0!important; }
}
/* For desktops */
@media only screen and (min-width: 992px) {
.ascend .nectar-progress-bar .bar-wrap { margin: 20px 0 0 0!important; }
}
/* For large devices */
@media only screen and (min-width: 1200px) {
.ascend .nectar-progress-bar .bar-wrap { margin: 20px 0 0 0!important; }
}

Hope this helps,

Regards

Hey Again, Hope you had a Great Weekend, 

1 &2 : I am afraid its not possible without template edits. 

3: Add this into the Custom CSS box located in your Salient Options panel (All custom css provided is tested in the Live Browser so it will work as intended . If you cant see any changes make sure there is no red cross in the Custom CSS Box as that syntax error would cause all css below it to not show up on the Frontend):

.swiper-wrapper .swiper-slide[data-color-scheme="dark"] .slider-down-arrow i.icon-default-style[class^="icon-"] {
    color: #f481c8 !important;
    font-size: 32px !important;
}

Thanks