Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • January 16, 2016 at 5:49 am #566449
    mrdan

    Hi,
    I’ve added css to allow sidebar to extend to bottom of page with background color using this CSS:

    https://kriesi.at/support/topic/color-change-in-sidebar/#post-245767

    @media only screen and (min-width: 768px) {
    .container_wrap.sidebar_right{
    background:-webkit-gradient(linear,right top,left top,color-stop(red,0.295),color-stop(white,0));
    background:-webkit-linear-gradient(right, red 29.5%, white 0%);
    background: -moz-linear-gradient(right, red 29.5%, white 0%);
    background: -o-linear-gradient(right, red 29.5%, white 0%);
    background: linear-gradient(right, red 29.5%, white 0%);
    }
    }

    It works, except in Chrome, a white line appears along the left edge of the sidebar below the sidebar content instead of a nice 1px line border along the left side of the extended portion of the sidebar (works in Firefox and IE)

    January 19, 2016 at 2:11 am #567503
    Josue

    Hi!

    You could target Chrome exclusively and change the percentages until you get the desired result:

    @media only screen and (min-width: 768px) {
.avia-chrome .container_wrap.sidebar_right{
background:-webkit-gradient(linear,right top,left top,color-stop(red,0.295),color-stop(white,0));
background:-webkit-linear-gradient(right, red 29.5%, white 0%);
background: -moz-linear-gradient(right, red 29.5%, white 0%);
background: -o-linear-gradient(right, red 29.5%, white 0%);
background: linear-gradient(right, red 29.5%, white 0%);
}
}

    Best regards,
    Josue

    January 29, 2016 at 5:05 pm #574670
    mrdan

    Hi,

    Thank you for your good suggestion.

    I tried to target Chrome explicitly, changing background:-webkit-linear-gradient(right, red 29.5%, white 0%); which will fix Chrome, but breaks other browsers such as Firefox. I think Firefox no longer uses -moz-linear-gradient, but instead uses -webkit-linear-gradient. There appears to be a bug in Chrome (sometimes referred to as ” gradient blurring” or “gradient percentage bug”. Is there another way to make the sidebar extend to bottom of page with the background color other than using gradient CSS?

    January 29, 2016 at 10:53 pm #574821
    Josue

    No, i don’t think there’s any other way (without modifying the theme files or doing a JS custom script), one thing you can use is the available browser class Enfold assigns to the html element:

    avia-chrome
avia-safari
avia-firefox

    Regards,
    Josue

    January 31, 2016 at 11:58 pm #575462
    mrdan

    Hi,

    Thanks for the suggestion. I found a typo in my style sheet and by tweaking the percentage in background:-webkit-linear-gradient(right, red 29.5%, white 0%); it fixed the chrome issue without affecting other current browsers.

    For IE9, I am trying to use -ms-filter: “progid:DXImageTransform.Microsoft.gradient (GradientType=0, startColorstr=red, endColorstr=red)”; but I am unable to find how to add precentages to this css statement. Is it possible?

    February 2, 2016 at 5:30 am #576229
    Rikard

    Hi,

    I’m not sure but since IE9 is a pretty old browser I would think there are some limitations to it, try searching for the problem to see if it’s possible or not.

    Thanks,
    Rikard

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