Tagged: , ,

Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • March 5, 2014 at 1:22 pm #232684
    Shabnam83

    Hi Support,

    Easy Slider doesn’t render well on mobile device, with the arrows being too large and the text in the slider being clipped.

    What can I do to fix this problem?

    This is the link to my page: psykologhjalp.nu

    March 5, 2014 at 9:39 pm #232940
    Yigit

    Hi Shabnam83!

    Please add following code to Quick CSS in Enfold theme options under Styling tab to hide the caption on mobile

    @media only screen and (max-width: 480px) { 
.avia-caption { display: none; }}

    Regards,
    Yigit

    March 5, 2014 at 9:49 pm #232957
    Shabnam83

    Hi Yigit.

    Thnx for the help. I was able to put some code together by looking at the different forum topics.

    It solved my problem on the phone and tablet but there is one thing more that I would like to do. The pictures are to small and I wonder if they can be bigger?

    Here’s the CSS code that I’ve assembled from different post. I’m a newbie so probably looks ridiculous but it works :).

    @media only screen and (max-width: 768px) {
    .avia-slideshow .avia-caption .avia-caption-title
    { font-size: 14px; }}
    @media only screen and (max-width: 480px) {
    .avia-caption {
    bottom: -10px;
    left: -18px;
    padding: 0 20px;
    width: 305px;
    }
    .avia-caption .avia-caption-title { margin: 0; }
    }
    @media only screen and (max-width: 480px) {
    #top .avia-slideshow-arrows a { display: none; }
    .avia-slideshow-dots {
    display: none;
    }
    }}

    Maybe you have better suggestions.

    Thnx for you help I really appreciate it.

    March 6, 2014 at 5:47 am #233053
    Ismael

    Hey!

    How are you? I hope you’re doing well today.

    You can adjust the size of the slider using this on Quick CSS or custom.css:

    @media only screen and (max-width: 767px) and (min-width: 480px) {
.responsive #main .container_wrap:first-child .container {
width: 528px;
margin: 0 auto;
}
}

    Adjust the width value if necessary.

    Best regards,
    Ismael

    March 6, 2014 at 10:41 am #233136
    Shabnam83

    Hej!

    It looks great. Now everything is fixed and working as is should.

    This is the final code that I have in the quick CSS:

    @media only screen and (max-width: 768px) {
    .avia-slideshow .avia-caption .avia-caption-title
    { font-size: 14px; }}
    @media only screen and (max-width: 480px) {
    .avia-caption {
    bottom: -10px;
    left: -18px;
    padding: 0 20px;
    width: 305px;
    }
    .avia-caption .avia-caption-title { margin: 0; }
    }
    @media only screen and (max-width: 480px) {
    #top .avia-slideshow-arrows a { display: none; }
    .avia-slideshow-dots {
    display: none;
    }
    }}
    @media only screen and (max-width: 767px) and (min-width: 480px) {
    .responsive #main .container_wrap:first-child .container {
    width: 528px;
    margin: 0 auto;
    }
    }

    It solved the issue with the slider display in the mobile and on the tab keeping the dots and the arrows.
    Maybe you should integrate it as a default option, just a suggestion…

    One more thing that I would like to ask and it concerns the stretched layout for mobile devices. It works perfect on mobile but on my Samsung tab 7 it is blurry. Why and can something be done to make it same as on the mobile?

    Thnx for the help.

    March 6, 2014 at 5:27 pm #233275
    Ismael

    Hi!

    Glad we could help. Can you please post a screenshot of how it looks on your “Samsung tab 7”? The slider images are blurry?

    Regards,
    Ismael

    March 6, 2014 at 6:19 pm #233331
    Shabnam83

    Hi,
    No not the slider.

    The menu that is in the upper right corner.

    Here’s the link to the picture

    Screen shot menu

    March 7, 2014 at 4:19 am #233549
    Josue

    Hey!

    Have you tried seeing from another devices? here’s how it looks on my Nexus 7:

    Regards,
    Josue

    March 8, 2014 at 11:34 pm #234297
    Shabnam83

    Hey,

    Thnx for your reply.

    Maybe is something with the Samsung tab?

    Best,

    Shabnam

    March 9, 2014 at 12:18 am #234319
    Josue

    Hi!

    Try it in another device, maybe is some sort of configuration on your tablet.

    Cheers!
    Josue

    March 23, 2017 at 4:51 am #765133
    FOXIT31

    Hello people
    I need help, I have a problem with the easy slider, it does not adapt to cell phones, the image becomes small and the text is disengaged.

    • This reply was modified 7 years, 7 months ago by FOXIT31.
    March 23, 2017 at 6:17 am #765159
    John Torvik

    Hi,

    I`ve visited your site and the text and the image are working normally, just this box is overlapping the slider: http://prntscr.com/end1ur

    to fix this, just add this custom CSS code at Enfold Theme Options > General Styling > Quick CSS

    
@media only screen and (max-width: 767px) {
  .responsive #top .flex_column_table { 
    margin: -100px !important;
  }
}

    Best regards,
    John Torvik

    March 26, 2017 at 3:09 am #766795
    FOXIT31

    @John Torvik

    First of all, thank you very much for the help :)

    I entered the code but it did not solve my problem.

    The problem is not the overlap of the box below. The problem is that the slide becomes very small when viewed on mobile phones. I need to increase (vertically) the size for mobile viewing: https://www.screencast.com/t/P6GFv2oJKIk

    March 26, 2017 at 8:51 am #766883
    John Torvik

    Hi,

    Add this custom CSS code to edit the slider height on mobile:

    
@media screen and (max-width: 480px) {
   .avia-slideshow-inner {
    min-height: 350px;
   }

   .avia-slideshow li img {
    min-height: 350px;
    width: 500px;
    min-width: 500px;
   }
}

    Best regards,
    John Torvik

  • Author
    Posts
Viewing 14 posts - 1 through 14 (of 14 total)
  • You must be logged in to reply to this topic.