Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • May 21, 2017 at 12:11 am #797128
    DickZirkzee

    Hi,
    please see thread
    #699899 .
    and my website: http://www.debeweging.info

    In short: the normal buttons on the AVIA easy slider dont get smaller when the website is shown on smartphone. So we duplicated the two buttons( second set) below the easy slider pic. On laptop the normal two avia easyslider buttons are shown and the second set is hidden . On smartphone it should be the other way around , the two normal avia easysliader buttons are hidden and the second set below is shown.
    It worked, but somehow not anymore. I did not change the CSS codes. oOn smartphone the two buttons on the easyslider are shwon again where they should disappear.
    Could you have a look why it doesnt work anymore? If neccesary, see my log in credentials below in private window

    The complete CSS code ( given by you guys is:
    /*animation button */
    .avia_transform .av_slideshow_full.avia-fade-slider .active-slide .avia-slideshow-button, .avia_transform .av_fullscreen.avia-fade-slider .active-slide .avia-slideshow-button {
    animation: 0s ease-out 0s normal none 1 running caption-top;
    visibility: visible;
    }

    .hide-desktop {
    display: none;
    }

    /*responsiveness mobile */
    @media only screen and (max-width: 767px) {
    .responsive #top .slideshow_caption h2 + br {
    display: none;
    }
    .responsive #top .slideshow_caption h2 {
    margin-bottom: 0;
    }
    #top .avia-slideshow-button {
    margin-top: 0;
    }

    .hide-desktop {
    display: block;
    }

    .buttons-hide-mobile .avia-button {
    display: none !important;
    }

    .home #after_full_slider_1 .av-content-full {
    padding-top: 10px;
    }

    .avia-button-wrap.hide-desktop a.avia-button {
    display: block;
    width: 100%;
    box-sizing: border-box;
    padding: 8px 18px;
    margin-bottom: 12px;
    }
    }

    /*responsiveness buttons only mobile */

    @media only screen and (min-width: 480px) {
    .only-smartphone { display: none !important; }}

    /*responsiveness no text on photo on mobile */

    @media only screen and (max-width: 767px) {
    .home .avia-caption-title {
    display:none !important;
    }
    }
    /*responsiveness caption and button on “over dick zirkzee blijft op zn plek */
    @media only screen and (max-width: 1200px) and (min-width: 768px) {
    .page-id-223 .caption_left .slideshow_caption {
    right: auto;
    left: 100px;
    width: 50%;
    }
    }

    /*position button on “over dick Zirkzee” */

    @media only screen
    and (min-device-width: 768px)
    and (max-device-width: 1024px)
    and (orientation: portrait) {
    #top .avia-slideshow-button {
    margin-top: -5px;
    }}
    /* Portrait */
    @media
    (max-device-width: 800px)
    and (orientation: portrait) {

    }

    • This topic was modified 7 years, 7 months ago by DickZirkzee.
    May 22, 2017 at 9:06 am #797470
    John Torvik

    Hey DickZirkzee,

    Please, may you re-check the credentials? Because Ive tried to access and theyre wrong.

    Best regards,
    John Torvik

    May 22, 2017 at 7:44 pm #797881
    DickZirkzee

    Hi thanks,
    should work. Just tried myself.
    Maybe you did not se the capital “J”?

    May 23, 2017 at 4:08 pm #798349
    Victoria

    Hi DickZirkzee,

    Here is the code you can put in Enfold > General Styling > Quick Css,  if it does not work, put into themes/enfold/css/custom.css for a bit different solution
    <pre>
    @media only screen and (max-width: 767px) {
    #full_slider_1 .av-single-slide.slide-1.active-slide img {
    left: 0px !important;
    min-height:300px;
    min-width: 890px;
    }
    #full_slider_1 .caption_fullwidth.av-slideshow-caption.caption_left.active-slide {
    min-height: 300px;
    }
    #full_slider_1 .avia-slideshow-inner {
    min-height: 300px;
    }
    #full_slider_1 .container.caption_container {
    padding-top:50px !important;
    width: 60% !important;
    float: left !important;
    margin-left: 10px !important;
    }
    #full_slider_1 .slideshow_align_caption {
    padding-top: 130px !important;
    }
    }

    @media only screen and (max-width: 450px) {

    #full_slider_1 .container.caption_container {
    width: 40% !important;
    float: left !important;
    margin-left: 10px !important;
    }
    #full_slider_1 .av-single-slide.slide-1.active-slide img {
    left: 0px !important;
    min-height: 200px;
    min-width: 630px;
    }
    #full_slider_1 .caption_fullwidth.av-slideshow-caption.caption_left.active-slide {
    min-height: 200px !important;
    }
    #full_slider_1 .slideshow_align_caption {
    padding-top: 0px !important;
    min-height: 200px ;
    }
    #full_slider_1 .avia-slideshow-inner {
    min-height: 200px;
    }
    }

    Let mw know what you think.
    If you need further assistance please let us know.

    Best regards,
    Victoria

    May 25, 2017 at 9:01 am #799420
    DickZirkzee

    Ha, works, fine, thanks
    Dick

    May 25, 2017 at 12:02 pm #799467
    Rikard

    Hi Dick,

    Great, glad you got it working. Please let us know if you should need any further help on the topic or if we can close it.

    Best regards,
    Rikard

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