Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • October 3, 2015 at 11:20 am #513129
    simonac

    Hi,

    i have a few things i need to change for the mobile view.

    1. full width slider controls – how to change the size of the arrow and its box on mobile. I use minimal control styling. (The size on mobile is way to big!)

    2. I have a partner/logo element which shows 2×3 logos in a row on desktop. But on mobile these logos show in a vertical row, which looks not good. How to make the logos fit in one row on mobile as well?

    3. I have a different image for the team on mobile and on desktop. The desktop version is linked as an anchor point for the menu. On mobile this part is not linked, because the image is removed then. How can i link the mobile image in the mobile version as well for this menupoint?

    Thanks Simon

    October 5, 2015 at 5:38 am #513470
    Ismael

    Hey simonac!

    Thank you for using Enfold.

    1.) Try to resize the arrow with this in the Quick CSS field:

    @media only screen and (max-width: 767px) {
#top .avia-slideshow-arrows a {
    height: 30px;
    line-height: 12px;
    font-size: 12px;
    text-indent: -600%;
}

#top .av-control-minimal .avia-slideshow-arrows a:before {
    line-height: 30px;
}
}

    2.) Add this inside the media query above:

    #top .avia-logo-element-container .slide-entry {
width: 33%;
}

    3.) Add something like this in the slider caption:

    <div id="team_mobile"></div>

    Cheers!
    Ismael

    October 5, 2015 at 4:51 pm #513928
    simonac

    Hi Ismael,

    thanks for the answer!
    1. works great.

    2. works, but the logos are still underneath. how can i make them in a horizontal line?

    3. works in combination with this:
    https://kriesi.at/support/topic/different-menu-on-mobile-view/
    …but because the caption is centered and there is no option to set it on top – when you click on the team menu-point on a mobile it scrolls untill the middle of the image and not untill the top. how can i manage this?

    i tried this from another thread without success:

    .avia-fullscreen-slider div ul li:first-child .caption_center {
top: -60%;
}

    Thanks a lot! Simon

    • This reply was modified 8 years, 7 months ago by simonac.
    October 7, 2015 at 6:13 am #514922
    Ismael

    Hi!

    Thank you for the update.

    2.) Replace the code with this:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .slide-entry {
    width: 32% !important;
    clear: none !important;
    float: left !important;
}
}

    3.) Please place it in the Caption Text field then add this in the Quick CSS field:

    #team1 {
    position: absolute;
    top: 0;
}

    Or just add another color section on top of the “team” section. Use the Section ID field to add the id. Set it to display none or set the minimum height and height to 0px.

    Best regards,
    Ismael

    October 7, 2015 at 9:41 am #515050
    simonac

    Hey Ismael,

    3.) worked out now!

    2.) is still the same as before.

    Thanks Simon

    October 20, 2015 at 8:49 am #521440
    Ismael

    Hey!

    Sorry for the delay. I checked the site but I don’t see the code anywhere. Please post the login details here, we’ll check it. Or try this instead:

    @media only screen and (max-width: 767px) {
.responsive #top #wrap_all .avia-content-slider-odd .slide-entry.first {
    margin-left: 0;
    width: 32%;
    float: left;
    clear: none;
}

.responsive #top #wrap_all .avia-content-slider-even .slide-entry.slide-parity-odd, .responsive #top #wrap_all .avia-content-slider-odd .slide-entry.slide-parity-even {
    margin: 0;
    clear: none;
    float: left;
    width: 32%;
}

.responsive #top #wrap_all .slide-entry {
    width: 32%;
    margin-left: 2%;
}
}

    Remove browser cache then reload the page.

    Best regards,
    Ismael

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