Mobile Changes

Hey brooks!

1. If you do this you will have black bars on top and bottom of the video but you could try adding this to a codeblock element in the page.

<style type = "text/css">
.avia-slideshow, .avia-slideshow-inner { min-height: 300px; 
</style>

I would try the fullscreen slider out.

2. You can hide the phone number with this CSS.

@media screen and (max-width: 767px) {
#header_meta { display: none !important; }
}

For the fullwidth button, add it to your page and let us know when your done and we’ll give you some CSS to have it only display on small screens.

3. Send us a link to the exact page please. I checked your other pages but couldn’t find it.

Best regards,
Elliott

Hi!

1. Since your using video there would just be an empty space beneath it on mobiles if you set a minimum height.

2. Your using a button there. You can change the font color in the shortcode options. To get it to call someone when clicked on then set the URL to “tel:1234567890”.

3. So your wanting to completely hide the header on that page for mobiles? Try dragging a codeblock element to the page content and add this inside.

<style type = "text/css">
@media screen and (max-width: 767px) {
#header { display: none !important; }
}
</style>

Cheers!
Elliott

Hi!

1. Try this CSS.

.avia-slideshow { min-height: 500px !important; }

2. Do this, http://kriesi.at/documentation/enfold/custom-css-and-quick-css/, and then give it a CSS class and then add it inside the previous CSS code I gave you.

<style type = “text/css”>
@media screen and (max-width: 767px) {
#header { display: none !important; }
.your_class { display: none !important; }
}
</style>

3. That’s not what your wanting? Take a screenshot and highlight exactly what your trying to do so we can get a better idea.

Regards,
Elliott

Hi!

1.) Please use the Quick CSS fiel for this code instead.

2.) If you want to hide it on desktop then use this code instead (again in Quick CSS field):

@media screen and (min-width: 1024px) {
div#text-2 {
display: none;
}}

and adjust the “min-width” value as needed.

Your number is white and icon green, so it looks exactly as you want, right?

Cheers!
Andy

Hey!

try this code to control it:

@media screen and (max-width: 767px) {
li.av-video-slide.av-video-service-youtube.av-loop-video.av-mobile-fallback-image.av-video-stretch.av-single-slide.slide-1.active-slide.av-video-playing.av-video-events-bound {
height: 290px !important;
}
ul.avia-slideshow-inner {
height: 300px !important;
}}

and adjust if needed.

Best regards,
Andy

Hi!

sorry @brooks I did not notice that another person (@therqworld) was bumping into your thread, so my previous code was made for him …
I added this code into your Quick CSS field:

@media screen and (max-width: 767px) {
.avia-slide-wrap {
height: 208px !important;
}}

To get rid off the black space below your video use this:

@media screen and (max-width: 767px) {
div#av_section_1 {
margin-top: -59px !important;
}}

If you wish to hide captions on mobile:

@media screen and (max-width: 767px) {
.avia-caption-content.av_inherit_color {
display: none;
}}

Hope this is how you wish to have it. Otherwise would be awesome to see a screenshot showing exactly what you want to achieve.

Best regards,
Andy

• This reply was modified 9 years, 4 months ago by Andy.