Mobile Issue

Thanks for looking into this.

This didn’t seem to work. I add both of them in the CSS under general styling. Also the icons of the slider also didn’t get smaller and still huge as it overlapping the text. Perhaps is there a way to not show it on the mobile devices?

Thanks,

Oh I didn’t realized I had it in there. Thanks that works. However, is there a way to do the following for MOBILE only:

1. Remove the slider buttons (arrows) since its huge on the mobile devices?
2. I see that the image is being responsive but the caption and learn more button is still huge. Is there anyway to have that be scaled down as well?

Thanks,

Hmm – thanks, but it didn’t seem to work. I even add !important; and still no change.

Hi – I tried putting it on the top, but then my navigation color bar disappeared.
This is what the codes I have and not sure which is affecting the color of the navigation bar.

@media only screen and (min-width: 767px) {
.html_header_top.html_header_sticky #top #wrap_all #main {
padding-top: 199px !important;
}
.av_secondary_right .sub_menu {
padding-left: 10px;
letter-spacing: 1px;
}
#menu-item-search {display:none;}
div {letter-spacing: 0.5px;}
#footer { font-size: 12px; }
#footer {line-height: 150%;}
#socket .container {
padding-top: 5px;
padding-bottom: 10px;
}
.main_color .avia-slider-testimonials .avia-testimonial-content { background: #00467F; }
.main_color .avia-testimonial-content strong { color: white; }
.avia-testimonial-arrow-wrap .avia-arrow {
background: #00457F !important;
border-color: #00457F !important;
}
a.iconbox_icon {
background-color: transparent !important;
background-image: url(http://www.accesssi.net/newsite/wp-content/uploads/2015/12/AccessSI_WhiteIcon.png);
border: none !important;
}
a.iconbox_icon:before {
content:none !important;
}
#top #wrap_all .custom-color-heading .av-special-heading-tag {
font-weight: bold;
}
.hr-full, .hr-big {
margin: 15px 0;
}
#top h1 a, #top h2 a, #top h3 a, #top h4 a, #top h5 a, #top h6 a { font-weight: inherit; text-decoration: none; color: inherit; }
#top h1 strong, #top h2 strong, #top h3 strong, #top h4 strong, #top h5 strong, #top h6 strong { color: inherit; }
h1 { font-size: 28px; line-height: 1.3em; margin-bottom: 10px;}
h2 { font-size: 23px; line-height: 1.1em; margin-bottom: 8px; }
h3 { font-size: 18px; line-height: 1.1em; margin-bottom: 4px; }
h4 { font-size: 14px; line-height: 1.1 em; }
h5 { font-size: 14px; line-height: 1.1em; }
h6 { font-size: 12px; line-height: 1.1em; }

.footer_color b {
color: #ffffff;
letter-spacing: 0.75px;
}
#top .main_color .input-text, #top .main_color input[type=’text’], #top .main_color input[type=’input’], #top .main_color input[type=’password’], #top .main_color input[type=’email’], #top .main_color input[type=’number’], #top .main_color input[type=’url’], #top .main_color input[type=’tel’], #top .main_color input[type=’search’], #top .main_color textarea, #top .main_color select {
border-color: #e1e1e1;
background-color: #ffffff;
color: #4d4d4d;
}
.ninja-forms-req-symbol {
color: #1c93cf !important;
}
.ninja-forms-form-wrap label {
padding-top: 10px !important;
}
.asc_rss .social_widget_icon {
color: #fff;
background-color: #007bb5;
border-color: #007bb5;
text-shadow: 1px 1px 1px #125688;
}
#top .fullsize .template-blog .post .entry-content-wrapper {
max-width: 1000px;
}
#top .fullsize .template-blog .post-title {
max-width: 1000px;
}
.small-preview .iconfont { display: none !important;
}
#top .fullsize .template-blog .blog-meta {
display: none !important;
}
#top .flex_column .template-blog .post-title {
font-size: 28px;
letter-spacing: 1px;
text-transform: uppercase;
}
.text-sep {
padding: 0 5px;
display: none !important;
}
.av-share-box .av-share-link-description {
margin-bottom: 20px;
font-size: 18px;
color: #1c93cF;
}
body .alignleft, .entry-content-wrapper a:hover .alignleft {
margin: 20px 20px 20px 0;
}
span.news-thumb.no-news-thumb {
display: none !important;
}
h3 a:hover {
color: #202759 !important;
text-decoration: underline !important;
}
.caption_bottom .slideshow_caption .slideshow_inner_caption .slideshow_align_caption {
text-shadow: 2px 2px 2px #000;
letter-spacing: 2px;
}
#top .av_inherit_color * {
letter-spacing: 1px;
}
.avia_transform .av_slideshow_full .avia-caption-title {
letter-spacing: 2px;
text-shadow: 2px 2px 2px #000;
}
.page .post-title a {
pointer-events:none !important;
}
@media only screen and (max-width: 767px) {
.avia-slideshow-arrows {
display: none !important;
}
.slideshow_caption * {
font-size: 12px !important;
}
}

Thanks that works. However, the header is still close to the top edge and learn more button is still huge. Anyway to resize that down or make the slider image bigger in height as it looks like it also got cropped smaller?

http://pasteboard.co/1eoUsN6b.png

Perfect. Thank you for the quick response and helping me solving this.