Viewing 16 posts - 1 through 16 (of 16 total)
  • Author
    Posts
  • March 6, 2019 at 8:55 pm #1075618
    marcoricci76

    Hi all,
    I need your help with the mobile slider visualization. I built an easy slider in my web site http://www.fairwindsdigital.it and in desktop mode is ok but the rendering in mobile is very bad. The head line is too big and we can’t see the button below the headline in mobile version. Could you plese help me to fix those issues?

    Thank you
    Marco

    March 8, 2019 at 5:18 am #1076221
    Rikard

    Hi Marco,

    Please try the following in Quick CSS under Enfold->General Styling:

    @media only screen and (max-width: 767px) {
.avia-builder-el-0 .slideshow_caption {
    padding-top: 20px;
}
}

    Best regards,
    Rikard

    March 11, 2019 at 4:34 pm #1077404
    marcoricci76

    Hi Rikard,
    thank you for your answer. I put the code in quick css as you suggested me but the problem still exist.
    is there a way to fix it?

    The screeshot below
    https://postimg.cc/gallery/33xu0faai/

    thank you
    Marco

    March 11, 2019 at 11:16 pm #1077558
    Jordan Shannon

    Hi,

    Did you add the code to the very top of quick css so it runs first? Also, be sure to clear the cache a few times over.

    Best regards,
    Jordan Shannon

    April 9, 2019 at 1:25 pm #1088655
    marcoricci76

    Hi Jordan,
    i still have the problem with mobile visualization of my web site. In Quick CSS under Enfold->General Styling I have this code yet to have the text in one line:

    @media only screen and (max-width: 767px) {
    .avia-builder-el-0 .slideshow_caption {
    padding-top: 50px;
    }
    }
    .slideshow_caption {
    width: 100% !important;
    }

    you can see the problem in those screenshot
    https://postimg.cc/gallery/hc1cjyca/

    let me know how I can solve it.

    Thank you
    Marco

    April 9, 2019 at 7:55 pm #1088840
    Victoria

    Hi Marco,

    There is not enough width on the small screens to have the text in one line.

    Please remove the code given before and try this:

    
@media only screen and (max-width:767px){
  #full_slider_1, 
  #full_slider_1 .av_slideshow_full.avia-slideshow,
  #full_slider_1  .avia-slideshow-inner,
  #full_slider_1 .avia-slideshow li,
  #full_slider_1 .avia-slideshow li img {
    min-height: 240px;

  }
  #full_slider_1 .avia-slideshow li img {
    width: 140% !important;
    max-width: auto;
  }
   .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
      padding-top: 0px;
  }
}

    Best regards,
    Victoria

    April 10, 2019 at 4:46 pm #1089186
    marcoricci76

    Hi Victoria,
    thank you very much for you answer. The mobile version now is perfect but now the copy in desktop version is on two lines.
    below the screeshot.

    https://postimg.cc/627cgjf4

    Is there a different solution for mobile and desktop?

    Thank you
    Marco

    April 12, 2019 at 4:29 am #1089849
    Rikard

    Hi Marco,

    Thanks for the update, I get a 404 error on the page you linked to previously though. We need to inspect the element in question in order to give you accurate CSS.

    Best regards,
    Rikard

    May 7, 2019 at 11:20 pm #1098235
    marcoricci76

    Hi Rikard,
    now the webb site is up and running. could you please help me about my previous issue?
    thank you
    marco

    Hi Victoria,
    thank you very much for you answer. The mobile version now is perfect but now the copy in desktop version is on two lines.
    below the screeshot.

    https://postimg.cc/627cgjf4

    Is there a different solution for mobile and desktop?

    Thank you
    Marco

    May 9, 2019 at 3:41 am #1098693
    Rikard

    Hi Marco,

    Thanks for the screenshot, your site seems to be having problems still though. Please see private.

    Best regards,
    Rikard

    May 13, 2019 at 10:26 am #1099988
    marcoricci76

    Hi could you please to try again now to reach the web site? everything should be ok.

    Thank you
    Marco

    May 14, 2019 at 7:46 am #1100389
    Victoria

    Hi Marco,

    The code I gave you affects only the mobile view and does not change anything on the desktop.

    The caption width was like this from the start o all screen sizes.

    Best regards,
    Victoria

    May 14, 2019 at 2:18 pm #1100540
    marcoricci76

    Hi Victoria,
    could you please help me to fix the deskot version? Mobile mode is perfect but on desktop mode i don’t like the text in two lines.

    Thank you
    marco

    May 15, 2019 at 10:41 am #1100954
    Victoria

    Hi Marco,

    Please try the following css:

    
.slideshow_caption {
    width: 100%;
}

    Best regards,
    Victoria

    May 21, 2019 at 1:38 pm #1102849
    marcoricci76

    Hi Victoria,
    thank you very much for you answer. Where Can I put the code you gave me?
    In Theme options ==> quick css I have this code yuio gave me for mobile view:

    @media only screen and (max-width:767px){
    #full_slider_1,
    #full_slider_1 .av_slideshow_full.avia-slideshow,
    #full_slider_1 .avia-slideshow-inner,
    #full_slider_1 .avia-slideshow li,
    #full_slider_1 .avia-slideshow li img {
    min-height: 240px;

    }
    #full_slider_1 .avia-slideshow li img {
    width: 140% !important;
    max-width: auto;
    }
    .html_header_transparency #top .avia-builder-el-0 .slideshow_caption {
    padding-top: 0px;
    }
    }

    Where can i put the second? Up o down it?

    TYhnak you Marco

    May 26, 2019 at 9:48 am #1104265
    Basilis

    Hi,

    You can put the new code there also.

    Best regards,
    Basilis

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