Viewing 14 posts - 1 through 14 (of 14 total)
  • Author
    Posts
  • February 3, 2017 at 9:20 am #742263
    jollys

    Hello – As suggested in themeforest, I am starting a new thread to help with below questions:

    1 Buttons in Image banner are not loading correctly in mobile?
    2. How to add google translator code to the site in the header (next to search icon) and should be visible in all pages

    thanks./

    • This topic was modified 7 years, 11 months ago by jollys.
    February 3, 2017 at 10:41 am #742314
    Vinay

    Hey jollys,

    Please try adding this code to the Quick CSS section under Enfold > General Styling or to your child themes style.css file:

    .avia-slideshow li img {
    min-height: 300px;
    min-width: 170vw;
}

    Best regards,
    Vinay

    February 3, 2017 at 7:33 pm #742539
    jollys

    Does’s work…this mess up the whole site including the desktop version with all images aligning itself to above size. need a fi very specific to banner image and specific to mobile… desktop is all fine. Thanks.

    February 4, 2017 at 12:57 pm #742808
    Nikko

    Hi,

    Try to put Vinay code inside this one:

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

}

    it should look like this one:

    @media only screen and (max-width:767px) {
  .avia-slideshow li img {
    min-height: 300px;
    min-width: 170vw;
  }
}

    Hope this helps :)

    Best regards,
    Nikko

    February 5, 2017 at 2:46 am #742909
    jollys

    Hi Nikko / Vinay – thanks for your suggestion and this code will work if we can target it just the top banner image (not all images on the page) and that too only in mobile version. Nikko’s suggestion get applies to all images in mobile view.
    thanks

    February 5, 2017 at 9:54 am #742954
    Vinay

    Hi,

    The code provided will affect only the mobile device. Please remove the old code and add the code Niko provided at the top of Quick CSS section in Enfold > General Styling.

    You may not see the changes until the cached files are cleared in your browser.

    Please try to hard refresh by pressing Ctrl + Shift + F5 on your browser or press the F12 key to open chrome dev tools and right click on the refresh button and select “Empty Cache and Hard Reload” and review the site again.

    Best regards,
    Vinay

    February 5, 2017 at 9:57 am #742956
    jollys

    Vinay – Nikko’s change impacts the mobile but it affects all images appearing in mobile. I need just the banner image to be impacted in mobile…

    thanks.

    February 5, 2017 at 10:54 am #742958
    Basilis

    Hey!

    The code should be targeting only the slideshow, based on what Nikko provided.

    Regarding google translator, there are many plugins out there that you can try, to see which one fit your needs the best.
    Most of theme, also have proper hooks, that will be used to be placed at the top position, that enfold has for those flags to be added.

    Let us know if we can do anything else for you.

    Best regards,
    Basilis

    February 7, 2017 at 6:22 am #743682
    jollys

    OK. I have 3 slide shows in one page and the code impacts all 3. Anything can be done to make it more specific for the banner slideshow only?

    Cool. Will explore the translators plugin.

    Thanks.

    February 11, 2017 at 9:49 am #745732
    Vinay

    Hi,

    We are very sorry for the delay, to target specific elements please enable the custom css class field: http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/

    Best regards,
    Vinay

    February 11, 2017 at 7:47 pm #745791
    jollys

    Thanks Vinay. I enabled the custom CSS but need help to add the below code? i tried ciouple of combinations but change is not reflected on mobile.

    @media only screen and (max-width:767px) {
    .avia-slideshow li img {
    min-height: 300px;
    min-width: 170vw;
    }
    }
    thanks.

    February 13, 2017 at 9:16 am #746240
    Vinay

    Hey!

    To target a specific element.
    1. Enable the custom css class name support.
    2. Add a custom class name in the custom css class name field of the slider element.
    3. Use the custom css class name in the code as sbown below.

    @media only screen and (max-width:767px) {
  .custom-slider .avia-slideshow li img {
    min-height: 300px;
    min-width: 170vw;
  }}

    Regards,
    Vinay

    February 14, 2017 at 10:20 pm #747141
    jollys

    Works great. Thank you.

    February 14, 2017 at 11:11 pm #747176
    Nikko

    Hi,

    Glad we could help :)

    Cheers!
    Nikko

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