Viewing 20 posts - 1 through 20 (of 20 total)
  • Author
    Posts
  • July 29, 2014 at 12:03 pm #297255
    codecreative

    Hi

    The really easy full width slider is awsome. Looks great and I have now made the move from using the layer slider to the really easy slider.

    My only gripe is that it doesn’t really render properly on a mobile. When I look at it through mobile the height of the slider is reduced probably as the width of the media screen is reduced to maintain aspect ratio. The result is that the background images, and slide text aren’t really readable.

    My conclusion is to add some css that will make the slier not visible when viewed by a mobile device.

    Would you advise this is the best way to handle the issue? Also if it is could you please provide me the necessary css tweak to achieve this?

    Thanks in advance guys. Love the theme

    July 30, 2014 at 3:32 am #297545
    Ismael

    Hi codecreative!

    Thank you for using the theme.

    Yes, I think it is better to hide the easy slider on mobile device especially if you attach the text on the image itself. Add this on Quick CSS or custom.css:

    @media only screen and (max-width: 767px) {
.avia-slideshow.avia-slide-slider {
display: none;
}
}

    If you want to remove the slideshow on a specific page, please post the page url here so that we can inspect it.

    Regards,
    Ismael

    August 14, 2014 at 9:09 am #304243
    J-rollebol

    Hi,

    I have the same problem with the height of the easy slider. Only i do not want it to disappear because there is an important message and call-to-action in the slider. So i would like the easy slider height to be 75% of the height of the device.

    Could you please provide me the necessary css tweak to achieve this?
    And the location of the css file that i need to tweak (i think i found it, but i’m not sure).

    Thanks in advance.

    • This reply was modified 10 years, 4 months ago by J-rollebol.
    August 14, 2014 at 12:08 pm #304329
    Yigit

    Hey!


    @j-rollebol     Can you please post the link to your page where you have Easy Slider element?

    Best regards,
    Yigit

    August 14, 2014 at 1:02 pm #304355
    J-rollebol

    Hi,

    This is the url of the page where i used the easy slider:
    http://www.sigmatap.com/wordpress/

    August 14, 2014 at 1:06 pm #304356
    Yigit

    Hi!

    Please try adding following code to Quick CSS in Enfold theme options under General Styling tab

    @media only screen and (max-width: 600px) {
ul.avia-slideshow-inner { height: 230px!important; }}

    Best regards,
    Yigit

    August 14, 2014 at 1:16 pm #304361
    codecreative

    hmm looks like a good possible solution let me know if this works. If it does do you think it may be worth including in the next release as standard css part of the theme?

    August 14, 2014 at 1:28 pm #304365
    Yigit

    Hi!

    To be honest, using !important rule on height is not really a good solution that would work fine for all users in my opinion, but let us wait to hear from @j-rollebol :)

    Regards,
    Yigit

    August 14, 2014 at 1:33 pm #304368
    J-rollebol

    Hi Yigit,

    It works, only the background image doesn’t scale.
    Do you have any idea how to tweak this?
    screendumb of issue

    • This reply was modified 10 years, 4 months ago by J-rollebol.
    August 14, 2014 at 1:43 pm #304373
    Yigit

    Hey!

    I wanted to look into it but apparently you have removed the code from Quick CSS. We need to see the issue to provide you accurate custom CSS code.

    Regards,
    Yigit

    August 14, 2014 at 1:46 pm #304376
    J-rollebol

    Sorry Yigit,

    Code is restored now.

    Regards,

    J-rollebol

    August 14, 2014 at 1:58 pm #304387
    Yigit

    Hey!

    Please try adding following code to Quick CSS as well

     @media only screen and (max-width: 600px) {
#top .av-video-slide .mejs-container { height: 230px !important; }}

    Regards,
    Yigit

    • This reply was modified 10 years, 4 months ago by Yigit.
    August 14, 2014 at 2:02 pm #304389
    J-rollebol

    Hey,

    I added the code like this:

    @media only screen and (max-width: 600px) {
ul.avia-slideshow-inner { height: 230px!important; }}

@media only screen and (max-width: 600px) {
#top .av-video-slide .mejs-container { height: 230px !important; }]

    But the result is the same.

    August 14, 2014 at 2:03 pm #304390
    codecreative

    Hey love the background image how have you managed to give it that animated effect?

    August 14, 2014 at 2:06 pm #304393
    J-rollebol

    Yigid,

    All the typography changed to the Arial.
    Is this because of the code i added?

    Regards,

    J-rollebol

    • This reply was modified 10 years, 4 months ago by J-rollebol.
    August 14, 2014 at 2:07 pm #304394
    Yigit

    Hi!

    You can wrap all the code inside one media query as following

    @media only screen and (max-width: 600px) {
video#player_19_2102733927_180725658 { top: 0!important; }
video#player_19_2102733927_180725658, ul.avia-slideshow-inner, #top .av-video-slide .mejs-container { height: 230px !important; }}

    Please update the code and replace it with the one above
    P.S.: +1 for the video slide!

    Cheers!
    Yigit

    August 14, 2014 at 2:23 pm #304398
    J-rollebol

    Hi Yigid,

    It works when i scale the width of my screen on desktop.
    But it doesn’t work on iPhone Safari and Chrome.
    Any idea how to fix this?

    Regards,
    J-rollebol

    August 15, 2014 at 4:33 pm #304976
    codecreative

    Yes interested to hear back on this as I need a css fix for it as well

    August 15, 2014 at 8:23 pm #305065
    Yigit

    Hey!

    I believe without distorting the image it is not possible. Video looked fine on browser but did not work on an actual mobile device

    Best regards,
    Yigit

    August 17, 2014 at 3:01 pm #305430
    J-rollebol

    Thats a bummer :(
    But thanks for looking in to this Yigid.

  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 20 total)
  • The topic ‘Really Easy Full Width Slider’ is closed to new replies.