-
Posts
-
Hi,
I am trying to increase the height of my slider on mobile with the following code but it is not working
/* Fullscreen slider height in portable devices*/
@media only screen and (max-width: 775px) {
.avia-fullscreen-slider .avia-slideshow {
max-height: 65px!important;
}
}Here is my site:
Hey navindesigns,
Height of your slider on smallest screen size is 130px. Can you please elaborate on the changes you would like to make? Would you like to decrease it or increase it? :)
Best regards,
YigitIs it really 130px on mobile?
This is what I am seeing
https://s32.postimg.org/rpf88v6v9/Screen_Shot_2016_08_02_at_1_30_08_PM.pngok
how do I make it taller
i added this code
/* Fullscreen slider height in portable devices*/
@media only screen and (max-width: 775px) {
.avia-fullscreen-slider .avia-slideshow {
max-height: 65px!important;
}
}should i remove that?
Hi!
Based on what you want to add ( 65px ) it is smaller from 130, that is why it is not working.
Can you please elaborate, like Yigit asked?
Regards,
BasilisI just changed it to 265px but the height is not changing on mobile
/* Fullscreen slider height in portable devices*/
@media only screen and (max-width: 775px) {
.avia-fullscreen-slider .avia-slideshow {
max-height: 265px!important;
}
}Hi,
Please change your code to following one
@media only screen and (max-width: 775px) { ul.avia-slideshow-inner { height: 265px!important; }}Best regards,
YigitThat only made the area taller, now I see white space below the slider
Hey!
That is expected. It would not be possible to increase the height without stretching the image and in my opinion that would look ugly. You can refer to this post – http://kriesi.at/documentation/enfold/hide-menu-itemselements-on-mobile/ and replace your element with another slider with different ratio. In that case, you would not need to use custom CSS as well
Regards,
YigitHow is this site site doing it? I want to match it like that site
Hi,
That site is using Fullscreen slider. You can try using fullscreen slider as well or refer to my previous post and display a different slider on mobile
Best regards,
YigitThanks
I just switched it to fullscreen slider and added the code and it worked but the only issue now is that the on mobile the left part of the image is being shown and not the center. I think on this site (http://1c5.964.myftpupload.com/) the slide is centered so you see the center of the image
my site – http://staging.wsmsnyc.org.s167849.gridserver.com/
Hi,
use this code inside Quick CSS field:
@media only screen and (max-width: 767px) { li.av-single-slide.slide-1.active-slide { background-position: -220px 0px !important; }}and adjust as needed.
Best regards,
AndyIf its not too diffcult, can you just tell me whats the code this site is using? I want it exackly like this.
2 things – make slide taller on mobile and center slide on mobile
Hi,
the site is using this code:
.avia-fullscreen-slider .avia-slideshow>ul>li { background-position: center center !important; background-size: cover; }Best regards,
AndyOk I think I got it to work but there seems to be a small “jump” in the slider to center the image when the site loads on my iphone 6
The “jump” is present when I scroll the page in iphone 6 as well
Hi,
which jump? I can’t see it. Can you make it visible to us please?
Please update the theme to the latest version. That should fix any issues you are currently experiencing :)To update to the latest version follow the simple instructions here. (Or if you want the super detailed explanation you can read this blog post)
If that does not help, feel free to reply here and we will take a closer look at the issue. In that case please also add your WordPress login credentials (in the “private data” field) so we can take a look at your admin area
Best regards,
AndyHi,
which jump? I can’t see it. Can you make it visible to us please?
Please update the theme to the latest version. That should fix any issues you are currently experiencing :)To update to the latest version follow the simple instructions here. (Or if you want the super detailed explanation you can read this blog post)
If that does not help, feel free to reply here and we will take a closer look at the issue. In that case please also add your WordPress login credentials (in the “private data” field) so we can take a look at your admin area
Best regards,
Andy
- You must be logged in to reply to this topic.