Viewing 8 posts - 1 through 8 (of 8 total)
  • Author
    Posts
  • September 21, 2017 at 9:27 am #854667
    markrosolowski

    Hello,
    I have a Color Section with a background image, and to make the parallax effect appear the way I would like I used the following code:

    .avia-section, .avia-section .av-parallax-inner {
    background-size: 1400px 500px !important;
}

    It works great, but this obviously effects every color section – so I set the Section ID of the Color Section to “ProductTopBanner,” and tried several variations of the code below with no success:

    .avia-section #ProductTopBanner, .avia-section .av-parallax-inner #ProductTopBanner{
    background-size: 1400px 500px !important;
}

    A little guidance would be greatly appreciated!
    -Mark

    September 21, 2017 at 9:22 pm #855061
    Victoria

    Hey markrosolowski,

    Could you please give us a link to your website, we need more context to be able to help you.

    Best regards,
    Victoria

    September 21, 2017 at 10:57 pm #855095
    markrosolowski

    Hi Victoria,

    Above the Fullwidth Sub Menu is my Color Section with the Section ID set to “ProductTopBanner”. Below the Fullwidth Sub Menu is another Color Section with the Section ID set to “Red.” I would like the CSS to only effect “ProductTopBanner.”

    September 22, 2017 at 6:26 am #855166
    John Torvik

    Hi,

    I have seen that you`re using an ID instead of a class. Check this article http://kriesi.at/documentation/enfold/turn-on-custom-css-field-for-all-alb-elements/ and change the ID to a class and the code should work like a charm.

    Best regards,
    John Torvik

    September 22, 2017 at 7:36 am #855201
    markrosolowski

    Hey John,

    I’ve turned on the Custom Class CSS Field and set the Class of my Color Section to “productTopBanner” and modified my code to this:

    .avia-section .productTopBanner, .avia-section .av-parallax-inner .productTopBanner {
    background-size: 1400px 500px !important;
}

    But it’s still not working.

    September 22, 2017 at 11:44 am #855329
    Victoria

    Hi markrosolowski,

    This will work just for that section.
    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

    
#producttopbanner .av-parallax.enabled-parallax .av-parallax-inner {
      background-size: 1400px 500px !important;
}

    If you need further assistance please let us know.

    Best regards,
    Victoria

    September 22, 2017 at 11:48 am #855331
    markrosolowski

    Hey Victoria,

    I put it in my Quick Css and it worked perfectly!

    Thank you and all the other moderators!

    September 22, 2017 at 5:43 pm #855461
    Victoria

    Hi markrosolowski,

    Glad we finally got things working for you! :)

    If you need further assistance please let us know.

    Best regards,
    Victoria

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