Full Width Slider caption right align problem

Hi guys
Q1 right aligned Caption Text jumps to the left on mobile devices? link in private
I’ve tried searching for general Text Size responsiveness for Mobile devices
Q2 could you please advise CSS code to reduce text size for mobile
Q3 would you advise using Code Snippet for the CSS as it appears to be a great way to label and organise code?
FYI have pasted all ccs code to avoid overlap or conflict issues:

..content, .sidebar {
padding: 0px 0px 0px 0px;
}

@media only screen and (max-width: 480px) {
.avia-caption-content p {
font-size: 12px;
}}

.single-portfolio .page-thumb{
display: none;
}
.avia_transform .avia_animated_image {
opacity: 1;
margin: auto;
}

.scroll-down-link { color: #800000 !important; }

.main_color .toggler {
color: #800000 ; font-size: 15px; !important;
}

.toggler { text-align: center !important; }

.av_promobox { margin: 6px 0; padding-left:10px; padding-right: 10px; padding: 10px !important;
}

.first-custom-text h5 { text-align: center; font-size: 20px; color: #808080; padding-top: 5px; }
.second-custom-text h1 { text-align: center; color: #af2323; font-size: 65px; font-family: tangerine; padding-top: 5px; }
@media only screen and (max-width: 678px) {
.second-custom-text h1 { font-size: 35px; }}
.avia-content-slider .slide-meta { display: none; }

.av-masonry-entry .av-inner-masonry-content {
padding: 7px;
}

.av-portfoliogrid-entry .av-inner–content {
padding: 7px;
}
.av-masonry-entry .av-inner-masonry-content {
text-align: center;
opacity: 0.5 !important;
}
.av-masonry-entry:hover .av-inner-masonry-content{
opacity: 0.5 !important;
}

@media only screen and (max-width: 767px) {
.av-inner-masonry-content{
display:none !important;
}

.slide-content {
background: #fff;
padding: 3 px;
}

Thanks
Chris